From 33c3945ce3f4038fd603bf264562cc741dd1ef43 Mon Sep 17 00:00:00 2001 From: nehring Date: Thu, 23 Nov 2017 16:40:07 +0000 Subject: [PATCH 1/2] options custom classes via props --- package.json | 2 +- src/MaterialChips/Index.md | 32 +++++++++++++++++++++++++++++++- src/MaterialChips/Options.js | 13 ++++++++++++- src/MaterialChips/index.js | 12 +++++++++--- 4 files changed, 53 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index c1cdf45..ae3630d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "material-input-chips", - "version": "1.3.9", + "version": "1.4.0", "description": "A chip input field using Material-UI@next.", "homepage": "https://rodrigonehring.github.io/material-input-chips/styleguide/", "main": "dist/material-input-chips.js", diff --git a/src/MaterialChips/Index.md b/src/MaterialChips/Index.md index 10f282b..0586ed4 100644 --- a/src/MaterialChips/Index.md +++ b/src/MaterialChips/Index.md @@ -122,16 +122,46 @@ const validators = [ ``` ------ -### Custom Chip Component +### Custom Chip Component and Options custom classes + +#### Options classes: +* optionsContainer +* menuItemRoot +* menuItemSelected +* optionsContainerOpen ```js const selected = [{ label: 'CUSTOM CHIP COMPONENT', Email: 'value' }]; +const options = [ + { label: 'big field some words', Email: 'Email' }, + { label: 'big field some words 2', Email: 'Email 2' }, + { label: 'big field some words 3', Email: 'Email 3' }, + { label: 'big field some words 4', Email: 'Email 4' }, + { label: 'big field some words 5', Email: 'Email 5' }, + { label: 'big field some words 6', Email: 'Email 6' }, + { label: 'big field some words 7', Email: 'Email 7' }, +]; +const customOptionsClasses = function() { + return { + optionsContainer: { + border: '3px solid red !important', + }, + menuItemRoot: { + color: 'green', + }, + menuItemSelected: { + border: '3px solid blue !important', + } + }; +} const chipComponent = function({ chip }) { return ( {chip.label} )}; diff --git a/src/MaterialChips/Options.js b/src/MaterialChips/Options.js index 2cea08d..f67ee87 100644 --- a/src/MaterialChips/Options.js +++ b/src/MaterialChips/Options.js @@ -4,6 +4,7 @@ import cx from 'classnames' import Paper from 'material-ui/Paper' import { MenuItem } from 'material-ui/Menu' import { withStyles } from 'material-ui/styles' +import deepmerge from 'deepmerge' const styles = theme => ({ optionsContainer: { @@ -56,6 +57,10 @@ const Options = ({ classes, open, options, onSelect, fields, focus }) => { onSelect(option)} + classes={{ + root: classes.menuItemRoot, + selected: classes.menuItemSelected, + }} selected={focus === index} > { + if (customStyles) { + return withStyles(theme => deepmerge(styles(theme), customStyles(theme)))(Options) + } + + return withStyles(styles)(Options) +} diff --git a/src/MaterialChips/index.js b/src/MaterialChips/index.js index e0454fb..5df6d96 100644 --- a/src/MaterialChips/index.js +++ b/src/MaterialChips/index.js @@ -8,7 +8,7 @@ import Fuse from 'fuse.js' import copy from 'copy-to-clipboard' import Chip from './Chip' -import Options from './Options' +import createOptions from './Options' import { TYPES, acceptedCharCodes, validate, mimicFuseSearch } from './helpers' import styles from './styles' @@ -29,6 +29,7 @@ class MaterialChips extends Component { /** clear input text after add an item */ clearAfterAdd: PropTypes.bool, + /** react component to render a chip */ chipComponent: PropTypes.func, /** Disable input */ @@ -65,6 +66,9 @@ class MaterialChips extends Component { /** To show in autocomplete */ options: PropTypes.arrayOf(PropTypes.object), + /** fn(theme) => ({ optionsContainer, optionsContainerOpen }) to override options styles */ + optionsClasses: PropTypes.func, + /** Must receive state from props */ selected: PropTypes.arrayOf(PropTypes.object), @@ -82,7 +86,6 @@ class MaterialChips extends Component { openOnFocus: false, chipsDisabled: false, inputDisabled: false, - // inputProps: {}, options: [], submitKeyCodes: [13, 9, 191], clearAfterAdd: true, @@ -103,6 +106,8 @@ class MaterialChips extends Component { optionsFocus: null, } + OptionsComponent = createOptions(this.props.optionsClasses) + componentDidMount() { document.addEventListener('mousedown', this.handleClickOutside) this.configureFuse() @@ -653,12 +658,13 @@ class MaterialChips extends Component { } - From 0a1f4a4f70cd34cfcc47bdf5e31b3069ab5f1254 Mon Sep 17 00:00:00 2001 From: nehring Date: Thu, 23 Nov 2017 16:43:59 +0000 Subject: [PATCH 2/2] styleguide --- ...{bundle.c104071a.js => bundle.9d6628f6.js} | 22 +++++++++---------- styleguide/index.html | 2 +- 2 files changed, 12 insertions(+), 12 deletions(-) rename styleguide/build/{bundle.c104071a.js => bundle.9d6628f6.js} (79%) diff --git a/styleguide/build/bundle.c104071a.js b/styleguide/build/bundle.9d6628f6.js similarity index 79% rename from styleguide/build/bundle.c104071a.js rename to styleguide/build/bundle.9d6628f6.js index ca23f4a..2c17cab 100644 --- a/styleguide/build/bundle.c104071a.js +++ b/styleguide/build/bundle.9d6628f6.js @@ -3,15 +3,15 @@ Licensed under the MIT License (MIT), see http://jedwatson.github.io/classnames */ -!function(){"use strict";function classNames(){for(var e=[],t=0;t=0||Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n}},function(e,t,n){"use strict";var r=n(22);e.exports=r},function(e,t,n){"use strict";e.exports=function reactProdInvariant(e){for(var t=arguments.length-1,n="Minified React error #"+e+"; visit http://facebook.github.io/react/docs/error-decoder.html?invariant="+e,r=0;r1&&void 0!==arguments[1]?arguments[1]:{};return function(n){var f=t.withTheme,d=void 0!==f&&f,v=t.flip,b=t.name,_=(0,c.default)(t,["withTheme","flip","name"]),E=(0,k.default)(e),w=E.themingEnabled||d||"string"==typeof b;void 0===E.options.index&&(P+=1,E.options.index=P);var R=function(e){function Style(e,t){(0,a.default)(this,Style);var n=(0,u.default)(this,(Style.__proto__||(0,o.default)(Style)).call(this,e,t));return n.state={},n.unsubscribeId=null,n.jss=null,n.sheetsManager=null,n.stylesCreatorSaved=null,n.theme=null,n.sheetOptions=null,n.theme=null,n.jss=n.context[x.jss]||S,n.sheetsManager=n.context.sheetsManager||T,n.stylesCreatorSaved=E,n.sheetOptions=(0,i.default)({generateClassName:D},n.context[x.sheetOptions]),n.theme=w?C.default.initial(t)||getDefaultTheme():O,n}return(0,l.default)(Style,e),(0,s.default)(Style,[{key:"componentWillMount",value:function componentWillMount(){this.attach(this.theme)}},{key:"componentDidMount",value:function componentDidMount(){var e=this;w&&(this.unsubscribeId=C.default.subscribe(this.context,function(t){var n=e.theme;e.theme=t,e.attach(e.theme),e.setState({},function(){e.detach(n)})}))}},{key:"componentWillUnmount",value:function componentWillUnmount(){this.detach(this.theme),null!==this.unsubscribeId&&C.default.unsubscribe(this.context,this.unsubscribeId)}},{key:"attach",value:function attach(e){var t=this.stylesCreatorSaved,n=this.sheetsManager.get(t);n||(n=new p.default,this.sheetsManager.set(t,n));var r=n.get(e);if(r||(r={refs:0,sheet:null},n.set(e,r)),0===r.refs){var o=t.create(e,b),a=void 0,s=this.jss.createStyleSheet(o,(0,i.default)({meta:a,flip:"boolean"==typeof v?v:"rtl"===e.direction,link:!1},this.sheetOptions,t.options,{name:b},_));r.sheet=s,s.attach();var u=this.context[x.sheetsRegistry];u&&u.add(s)}r.refs+=1}},{key:"detach",value:function detach(e){var t=this.stylesCreatorSaved,n=this.sheetsManager.get(t),r=n.get(e);if(r.refs-=1,0===r.refs){n.delete(e),this.jss.removeStyleSheet(r.sheet);var i=this.context[x.sheetsRegistry];i&&i.remove(r.sheet)}}},{key:"render",value:function render(){var e=this.props,t=e.classes,o=e.innerRef,a=(0,c.default)(e,["classes","innerRef"]),s=void 0,u=this.sheetsManager.get(this.stylesCreatorSaved).get(this.theme).sheet.classes;s=t?(0,i.default)({},u,(0,r.default)(t).reduce(function(e,n){return t[n]&&(e[n]=u[n]+" "+t[n]),e},{})):u;var l={};return d&&(l.theme=this.theme),h.default.createElement(n,(0,i.default)({classes:s,ref:o},l,a))}}]),Style}(h.default.Component);return R.contextTypes=(0,i.default)({sheetsManager:m.default.object},y.default,w?C.default.contextTypes:{}),R.Naked=n,R.propTypes={},(0,g.default)(R,n),R.options=t,R}}},function(e,t,n){"use strict";var r=n(412);n.d(t,"a",function(){return r.a})},function(e,t,n){"use strict";t.__esModule=!0;var r=function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}(n(160));t.default=function(e,t,n){return t in e?(0,r.default)(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}},function(e,t,n){"use strict";function toObject(e){if(null===e||void 0===e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}/* +!function(){"use strict";function classNames(){for(var e=[],t=0;t=0||Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n}},function(e,t,n){"use strict";var r=n(22);e.exports=r},function(e,t,n){"use strict";e.exports=function reactProdInvariant(e){for(var t=arguments.length-1,n="Minified React error #"+e+"; visit http://facebook.github.io/react/docs/error-decoder.html?invariant="+e,r=0;r1&&void 0!==arguments[1]?arguments[1]:{};return function(n){var f=t.withTheme,d=void 0!==f&&f,v=t.flip,b=t.name,_=(0,c.default)(t,["withTheme","flip","name"]),E=(0,k.default)(e),w=E.themingEnabled||d||"string"==typeof b;void 0===E.options.index&&(P+=1,E.options.index=P);var S=function(e){function Style(e,t){(0,a.default)(this,Style);var n=(0,u.default)(this,(Style.__proto__||(0,o.default)(Style)).call(this,e,t));return n.state={},n.unsubscribeId=null,n.jss=null,n.sheetsManager=null,n.stylesCreatorSaved=null,n.theme=null,n.sheetOptions=null,n.theme=null,n.jss=n.context[x.jss]||R,n.sheetsManager=n.context.sheetsManager||O,n.stylesCreatorSaved=E,n.sheetOptions=(0,i.default)({generateClassName:D},n.context[x.sheetOptions]),n.theme=w?C.default.initial(t)||getDefaultTheme():T,n}return(0,l.default)(Style,e),(0,s.default)(Style,[{key:"componentWillMount",value:function componentWillMount(){this.attach(this.theme)}},{key:"componentDidMount",value:function componentDidMount(){var e=this;w&&(this.unsubscribeId=C.default.subscribe(this.context,function(t){var n=e.theme;e.theme=t,e.attach(e.theme),e.setState({},function(){e.detach(n)})}))}},{key:"componentWillUnmount",value:function componentWillUnmount(){this.detach(this.theme),null!==this.unsubscribeId&&C.default.unsubscribe(this.context,this.unsubscribeId)}},{key:"attach",value:function attach(e){var t=this.stylesCreatorSaved,n=this.sheetsManager.get(t);n||(n=new p.default,this.sheetsManager.set(t,n));var r=n.get(e);if(r||(r={refs:0,sheet:null},n.set(e,r)),0===r.refs){var o=t.create(e,b),a=void 0,s=this.jss.createStyleSheet(o,(0,i.default)({meta:a,flip:"boolean"==typeof v?v:"rtl"===e.direction,link:!1},this.sheetOptions,t.options,{name:b},_));r.sheet=s,s.attach();var u=this.context[x.sheetsRegistry];u&&u.add(s)}r.refs+=1}},{key:"detach",value:function detach(e){var t=this.stylesCreatorSaved,n=this.sheetsManager.get(t),r=n.get(e);if(r.refs-=1,0===r.refs){n.delete(e),this.jss.removeStyleSheet(r.sheet);var i=this.context[x.sheetsRegistry];i&&i.remove(r.sheet)}}},{key:"render",value:function render(){var e=this.props,t=e.classes,o=e.innerRef,a=(0,c.default)(e,["classes","innerRef"]),s=void 0,u=this.sheetsManager.get(this.stylesCreatorSaved).get(this.theme).sheet.classes;s=t?(0,i.default)({},u,(0,r.default)(t).reduce(function(e,n){return t[n]&&(e[n]=u[n]+" "+t[n]),e},{})):u;var l={};return d&&(l.theme=this.theme),h.default.createElement(n,(0,i.default)({classes:s,ref:o},l,a))}}]),Style}(h.default.Component);return S.contextTypes=(0,i.default)({sheetsManager:m.default.object},y.default,w?C.default.contextTypes:{}),S.Naked=n,S.propTypes={},(0,g.default)(S,n),S.options=t,S}}},function(e,t,n){"use strict";var r=n(412);n.d(t,"a",function(){return r.a})},function(e,t,n){"use strict";t.__esModule=!0;var r=function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}(n(160));t.default=function(e,t,n){return t in e?(0,r.default)(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}},function(e,t,n){"use strict";function toObject(e){if(null===e||void 0===e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}/* object-assign (c) Sindre Sorhus @license MIT */ -var r=Object.getOwnPropertySymbols,i=Object.prototype.hasOwnProperty,o=Object.prototype.propertyIsEnumerable;e.exports=function shouldUseNative(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},n=0;n<10;n++)t["_"+String.fromCharCode(n)]=n;if("0123456789"!==Object.getOwnPropertyNames(t).map(function(e){return t[e]}).join(""))return!1;var r={};return"abcdefghijklmnopqrst".split("").forEach(function(e){r[e]=e}),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},r)).join("")}catch(e){return!1}}()?Object.assign:function(e,t){for(var n,a,s=toObject(e),u=1;u1){for(var f=Array(p),d=0;d1){for(var m=Array(h),g=0;g1)for(var n=1;n1){for(var f=Array(p),d=0;d1){for(var m=Array(h),g=0;g1)for(var n=1;n]/,u=n(112)(function(e,t){if(e.namespaceURI!==o.svg||"innerHTML"in e)e.innerHTML=t;else{(r=r||document.createElement("div")).innerHTML=""+t+"";for(var n=r.firstChild;n.firstChild;)e.appendChild(n.firstChild)}});if(i.canUseDOM){var l=document.createElement("div");l.innerHTML=" ",""===l.innerHTML&&(u=function(e,t){if(e.parentNode&&e.parentNode.replaceChild(e,e),a.test(t)||"<"===t[0]&&s.test(t)){e.innerHTML=String.fromCharCode(65279)+t;var n=e.firstChild;1===n.data.length?e.removeChild(n):n.deleteData(0,1)}else e.innerHTML=t}),l=null}e.exports=u},function(e,t,n){"use strict";function escapeHtml(e){var t=""+e,n=r.exec(t);if(!n)return t;var i,o="",a=0,s=0;for(a=n.index;a]/;e.exports=function escapeTextContentForBrowser(e){return"boolean"==typeof e||"number"==typeof e?""+e:escapeHtml(e)}},function(e,t,n){"use strict";function getListeningForDocument(e){return Object.prototype.hasOwnProperty.call(e,h)||(e[h]=f++,c[e[h]]={}),c[e[h]]}var r,i=n(11),o=n(104),a=n(360),s=n(189),u=n(361),l=n(108),c={},p=!1,f=0,d={topAbort:"abort",topAnimationEnd:u("animationend")||"animationend",topAnimationIteration:u("animationiteration")||"animationiteration",topAnimationStart:u("animationstart")||"animationstart",topBlur:"blur",topCanPlay:"canplay",topCanPlayThrough:"canplaythrough",topChange:"change",topClick:"click",topCompositionEnd:"compositionend",topCompositionStart:"compositionstart",topCompositionUpdate:"compositionupdate",topContextMenu:"contextmenu",topCopy:"copy",topCut:"cut",topDoubleClick:"dblclick",topDrag:"drag",topDragEnd:"dragend",topDragEnter:"dragenter",topDragExit:"dragexit",topDragLeave:"dragleave",topDragOver:"dragover",topDragStart:"dragstart",topDrop:"drop",topDurationChange:"durationchange",topEmptied:"emptied",topEncrypted:"encrypted",topEnded:"ended",topError:"error",topFocus:"focus",topInput:"input",topKeyDown:"keydown",topKeyPress:"keypress",topKeyUp:"keyup",topLoadedData:"loadeddata",topLoadedMetadata:"loadedmetadata",topLoadStart:"loadstart",topMouseDown:"mousedown",topMouseMove:"mousemove",topMouseOut:"mouseout",topMouseOver:"mouseover",topMouseUp:"mouseup",topPaste:"paste",topPause:"pause",topPlay:"play",topPlaying:"playing",topProgress:"progress",topRateChange:"ratechange",topScroll:"scroll",topSeeked:"seeked",topSeeking:"seeking",topSelectionChange:"selectionchange",topStalled:"stalled",topSuspend:"suspend",topTextInput:"textInput",topTimeUpdate:"timeupdate",topTouchCancel:"touchcancel",topTouchEnd:"touchend",topTouchMove:"touchmove",topTouchStart:"touchstart",topTransitionEnd:u("transitionend")||"transitionend",topVolumeChange:"volumechange",topWaiting:"waiting",topWheel:"wheel"},h="_reactListenersID"+String(Math.random()).slice(2),m=i({},a,{ReactEventListener:null,injection:{injectReactEventListener:function(e){e.setHandleTopLevel(m.handleTopLevel),m.ReactEventListener=e}},setEnabled:function(e){m.ReactEventListener&&m.ReactEventListener.setEnabled(e)},isEnabled:function(){return!(!m.ReactEventListener||!m.ReactEventListener.isEnabled())},listenTo:function(e,t){for(var n=t,r=getListeningForDocument(n),i=o.registrationNameDependencies[e],a=0;a=48&&t<=57}},function(e,t,n){var r=n(88),i=1/0;e.exports=function toKey(e){if("string"==typeof e||r(e))return e;var t=e+"";return"0"==t&&1/e==-i?"-0":t}},function(e,t,n){"use strict";(function(e){function _toConsumableArray(e){if(Array.isArray(e)){for(var t=0,n=Array(e.length);t0||e.sections.length>0||n.test(e.name)})}function filterComponentsByExactName(e,t){return e.filter(function(e){return e.name===t})}function filterComponentsInSectionsByExactName(e,t){var n=[];return e.forEach(function(e){e.components&&n.push.apply(n,_toConsumableArray(filterComponentsByExactName(e.components,t))),e.sections&&n.push.apply(n,_toConsumableArray(filterComponentsInSectionsByExactName(e.sections,t)))}),n}function findSection(e,t){var n=e.find(function(e){return e.name===t});if(n)return n;var r=!0,i=!1,o=void 0;try{for(var a,s=e[Symbol.iterator]();!(r=(a=s.next()).done);r=!0){var u=a.value;if(u.sections&&0!==u.sections.length){var l=findSection(u.sections,t);if(l)return l}}}catch(e){i=!0,o=e}finally{try{!r&&s.return&&s.return()}finally{if(i)throw o}}}n.d(t,"j",function(){return a}),t.i=setSlugs,t.h=processSections,t.d=filterSectionsByName,t.b=filterComponentsInSectionsByExactName,t.e=findSection,t.f=function getInfoFromHash(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:window.location.hash;if("#!/"===e.substr(0,3)){var t=e.substr(3).split("/"),n=parseInt(t[1],10);return{targetName:t[0],targetIndex:i()(n)?void 0:n}}return{}},t.a=function filterComponentExamples(e,t){var n=Object.assign({},e);return n.props.examples=[e.props.examples[t]],n},t.c=function filterSectionExamples(e,t){var n=Object.assign({},e);return n.content=[e.content[t]],n},t.g=function getUrl(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e.name,n=e.slug,r=e.example,i=e.anchor,o=e.isolated,a=e.nochrome,s=e.absolute,u=arguments.length>1&&void 0!==arguments[1]?arguments[1]:window.location,l=u.origin,c=u.pathname;return a&&(c+="?nochrome"),i?c+="#"+n:(o||a)&&(c+="#!/"+t),r&&(c+="/"+r),s?l+c:c};var r=n(629),i=n.n(r),o=n(631),a=new(n.n(o).a)}).call(t,n(37))},function(e,t,n){var r=n(155),i=Math.min;e.exports=function(e){return e>0?i(r(e),9007199254740991):0}},function(e,t){var n=0,r=Math.random();e.exports=function(e){return"Symbol(".concat(void 0===e?"":e,")_",(++n+r).toString(36))}},function(e,t){t.f={}.propertyIsEnumerable},function(e,t,n){"use strict";function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var r=_interopRequireDefault(n(698)),i=_interopRequireDefault(n(706)),o="function"==typeof i.default&&"symbol"==typeof r.default?function(e){return typeof e}:function(e){return e&&"function"==typeof i.default&&e.constructor===i.default&&e!==i.default.prototype?"symbol":typeof e};t.default="function"==typeof i.default&&"symbol"===o(r.default)?function(e){return void 0===e?"undefined":o(e)}:function(e){return e&&"function"==typeof i.default&&e.constructor===i.default&&e!==i.default.prototype?"symbol":void 0===e?"undefined":o(e)}},function(e,t,n){var r=n(48),i=n(702),o=n(158),a=n(156)("IE_PROTO"),s=function(){},u=function(){var e,t=n(268)("iframe"),r=o.length;for(t.style.display="none",n(703).appendChild(t),t.src="javascript:",(e=t.contentWindow.document).open(),e.write(" +