mlaursen / react-md Goto Github PK
View Code? Open in Web Editor NEWReact material design - An accessible React component library built from the Material Design guidelines in Sass
Home Page: https://react-md.dev
License: MIT License
React material design - An accessible React component library built from the Material Design guidelines in Sass
Home Page: https://react-md.dev
License: MIT License
Need to update the List Item component to allow a control item.
This means to integrate a Checkbox before/after the primary text or a switch after the primary text.
There will be no ink when a user clicks the list item, it will just toggle the component.
Should this be a separate component?
Also need to allow Leave-behinds for allowing an action to occur when an item is swiped left or right.
https://github.com/reactjs/react-docgen
It'll make it nicer for the documentation website since all that data will be fuzzy searchable.
Need to figure out how tabs should work in navigation drawers.
Should it be children with a prop saying children are tabs? Pass in a list of tabs as props?
It should eventually be that navigation drawers would choose the correct content to display based on a tab.
there is a newish font as part of md called noto.
its designed and recommended for where you need to support many languages.
i am not an expert on this. i am using this repo for a project that needs to work in lots of languages.
seeking advice...
Jump clicking to a new value is off by a lot. Also unable to use the left/right arrow keys to increment/decrement the value. Also unable to drag to new value.
I think it would be a good idea to have a Slack group for this project in order to improve communication.
This library is great, thank you for your work. Is it possible to release a umd build? For example, the react node module contains a umd build by itself.
The documentation of TextField says:
However the TextField implementation applies to the Input instead of field container:
lib/TextFields/TextFields.js:194
var textFieldProps = _extends({}, props, {
value: value,
className: (0, _classnames2.default)('md-text-field', className, {
active: active,
'floating-label': useFloatingLabel,
'single-line': !useFloatingLabel && !multiline,
'multi-line': multiline,
'full-width': fullWidth
}),
onFocus: this.handleFocus,
onBlur: this.handleBlur,
onChange: this.handleChange
});
I assume the right is in the container as the documentation says.
Other issue, the documentation says that style
is a remaining property, but in the code style
is filtered from the remaining properties:
lib/TextFields/TextFields.js:153
var props = _objectWithoutProperties(_props, ['className', 'containerClassName', 'label', 'placeholder', 'maxLength', 'helpText', 'errorText', 'floatingLabel', 'icon', 'rightIcon', 'lineDirection', 'rows', 'maxRows', 'style', 'required', 'helpOnFocus', 'fullWidth']);
Should style
be applied to the input or should be a remaining property and applied to the container?
Should be able to swipe the calendar left or right to change the current month.
Receive warnings that input and textarea should be controlled or uncontrolled. So need to either use defaultValue or value, not both programatically.
If you click on the text field part of the picker component or the select field component, the dialog/menu appear and then close immediately.
This is either because they are triggered to open on focus and lose focus immediately or because the window click listener is happening automatically when opening which closes.
Need to include the margin in the positioning of the opposite attributes.
Example: If doing a top or bottom positioned tooltip, include the margin in the calculation for the left position. So doing a left or right positioned tooltip requires an include of margin for the top positioning.
const march14 = new Date(Date.UTC(2016, 2, 14, 15));
const formattedTime = Intl.DateTimeFormat('en-US', { hour: 'numeric', minute: '2-digit'}).format(march14);
const timeParts = time.split(/(?=[^0-9A-z])/);
const [hour, minute, timePeriod] = timeParts;
console.log(`Formatted Time: '${formattedTime}`);
console.log(`Time parts: '${timeParts}'`);
console.log(`Hour: '${hour}'`);
console.log(`Minute: '${minute}'`);
console.log(`Time Period: '${timePeriod}'`);
console.log('typeof hour:', typeof hour);
console.log('hour === \'11\'?', hour === '11');
const [fullTime, other] = formattedTime.split(' ');
console.log(`Other: '${other}'`);
console.log('other === \'AM\'?', other === 'AM');
// Chrome and Firefox
Formatted Time: '11:00 AM'
Time Parts: '['11', ':00', ' AM']'
Hour: '11'
Minute: ':00'
Time Period: ' AM'
typeof hour: string
hour === '11'? true
Other: 'AM'
other === 'AM'? true
// IE
Formatted Time: '11:00 AM'
Time Parts: '['11', ':', '0', '0', ' ', 'A', 'M']'
Hour: '11'
Minute: ':'
Time Period: '0'
typeof hour: string
hour === '11'? false
Other: 'AM'
other === 'AM'? false
Currently FullWidth in Text Field is used to fit the input in a full width Form, but would be nice if it were possible to have a property for only to change the width to 100%, without change any other thing in the field. I know that it is possible using the style property, but it is not simple because is necessary to deal with different elements (input, container, right icon, ...), besides that, it would be nice to have FullWidth also in Select Field, and Select Field has more elements to deal.
So, I propose for the current behaviour to use the name Block (like bootstrap buttons) instead of FullWidth, and use FullWidth just for the width of Text Fields and Select Fields.
I've implemented these proposed changes: https://github.com/carlosforero/react-md/commit/cc7bb0ff52b535579c01c242261fe8d4bd96959c
Let me know any observation, in order to send a PR.
The documentation about NavigationDrawer is very complicated. The sample code should be easier to understand.
I can prepare a PR next week.
SelectField should have a behaviour similar to an html control selection, so when the control has the focus and a key is pressed, the control should select the option that starts with the character pressed.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.