├── .babelrc ├── .gitignore ├── .idea └── workspace.xml ├── .npmignore ├── .travis.yml ├── LICENSE ├── README.md ├── docs └── index.html ├── doczrc.js ├── lib ├── components │ ├── Alert │ │ ├── Alert.js │ │ ├── AlertClose.js │ │ └── index.js │ ├── Badge │ │ ├── Badge.js │ │ └── index.js │ ├── Button │ │ ├── Button.js │ │ └── index.js │ ├── Card │ │ ├── Card.js │ │ ├── CardBody.js │ │ ├── CardFooter.js │ │ ├── CardHeader.js │ │ ├── CardTitle.js │ │ └── index.js │ ├── Container │ │ ├── Container.js │ │ └── index.js │ ├── Divider │ │ ├── Divider.js │ │ └── index.js │ ├── Drop │ │ ├── Drop.js │ │ ├── DropContainer.js │ │ └── index.js │ ├── Dropdown │ │ ├── Dropdown.js │ │ └── index.js │ ├── Flex │ │ ├── Flex.js │ │ └── index.js │ ├── Form │ │ ├── Form.js │ │ ├── FormControls.js │ │ ├── FormFieldset.js │ │ ├── FormLegend.js │ │ └── index.js │ ├── Grid │ │ ├── Grid.js │ │ ├── GridItem.js │ │ └── index.js │ ├── Input │ │ ├── Input.js │ │ ├── InputCheckbox.js │ │ ├── InputLabel.js │ │ ├── InputRadio.js │ │ ├── InputTextarea.js │ │ └── index.js │ ├── Label │ │ ├── Label.js │ │ └── index.js │ ├── Margin │ │ ├── Margin.js │ │ └── index.js │ ├── Modal │ │ └── Modal.js │ ├── Progress │ │ ├── Progress.js │ │ └── index.js │ ├── Select │ │ ├── Select.js │ │ ├── SelectOption.js │ │ └── index.js │ ├── Spinner │ │ ├── Spinner.js │ │ └── index.js │ ├── Tab │ │ ├── Tab.js │ │ ├── TabItem.js │ │ └── index.js │ ├── Table │ │ ├── Table.js │ │ ├── TableBody.js │ │ ├── TableCaption.js │ │ ├── TableCell.js │ │ ├── TableFooter.js │ │ ├── TableHead.js │ │ ├── TableRow.js │ │ └── index.js │ └── Tooltip │ │ ├── Tooltip.js │ │ └── index.js └── index.js ├── netlify.toml ├── package-lock.json ├── package.json ├── src ├── components │ ├── Alert │ │ ├── Alert.js │ │ ├── Alert.mdx │ │ ├── AlertClose.js │ │ └── index.js │ ├── Badge │ │ ├── Badge.js │ │ ├── Badge.mdx │ │ └── index.js │ ├── Breadcrumb │ │ ├── Breadcrumb.js │ │ ├── Breadcrumb.mdx │ │ ├── BreadcrumbItem.js │ │ └── index.js │ ├── Button │ │ ├── Button.js │ │ ├── Button.mdx │ │ ├── ButtonGroup.js │ │ └── index.js │ ├── Card │ │ ├── Card.js │ │ ├── Card.mdx │ │ ├── CardBody.js │ │ ├── CardFooter.js │ │ ├── CardHeader.js │ │ ├── CardTitle.js │ │ └── index.js │ ├── Container │ │ ├── Container.js │ │ ├── Container.mdx │ │ └── index.js │ ├── Divider │ │ ├── Divider.js │ │ ├── Divider.mdx │ │ └── index.js │ ├── Drop │ │ ├── Drop.js │ │ ├── Drop.mdx │ │ ├── DropContainer.js │ │ └── index.js │ ├── Dropdown │ │ ├── Dropdown.js │ │ ├── Dropdown.mdx │ │ ├── DropdownContainer.js │ │ └── index.js │ ├── Flex │ │ ├── Flex.js │ │ ├── Flex.mdx │ │ └── index.js │ ├── Form │ │ ├── Form.js │ │ ├── Form.mdx │ │ ├── FormControls.js │ │ ├── FormFieldset.js │ │ ├── FormLegend.js │ │ └── index.js │ ├── Grid │ │ ├── Grid.js │ │ ├── Grid.mdx │ │ ├── GridItem.js │ │ └── index.js │ ├── Input │ │ ├── Input.js │ │ ├── Input.mdx │ │ ├── InputCheckbox.js │ │ ├── InputLabel.js │ │ ├── InputRadio.js │ │ ├── InputTextarea.js │ │ └── index.js │ ├── Label │ │ ├── Label.js │ │ ├── Label.mdx │ │ └── index.js │ ├── Link │ │ ├── Link.js │ │ ├── Link.mdx │ │ └── index.js │ ├── List │ │ ├── List.js │ │ ├── List.mdx │ │ ├── ListItem.js │ │ └── index.js │ ├── Margin │ │ ├── Margin.js │ │ ├── Margin.mdx │ │ └── index.js │ ├── Modal │ │ └── Modal.js │ ├── Nav │ │ ├── Nav.js │ │ ├── Nav.mdx │ │ ├── NavDivider.js │ │ ├── NavHeader.js │ │ ├── NavItem.js │ │ └── index.js │ ├── Navbar │ │ ├── Navbar.js │ │ ├── Navbar.mdx │ │ └── index.js │ ├── Placeholder │ │ ├── Placeholder.js │ │ ├── Placeholder.mdx │ │ └── index.js │ ├── Progress │ │ ├── Progress.js │ │ ├── Progress.mdx │ │ └── index.js │ ├── Select │ │ ├── Select.js │ │ ├── Select.mdx │ │ ├── SelectOption.js │ │ └── index.js │ ├── Spinner │ │ ├── Spinner.js │ │ ├── Spinner.mdx │ │ └── index.js │ ├── Tab │ │ ├── Tab.js │ │ ├── Tab.mdx │ │ ├── TabItem.js │ │ └── index.js │ ├── Table │ │ ├── Table.js │ │ ├── Table.mdx │ │ ├── TableBody.js │ │ ├── TableCaption.js │ │ ├── TableCell.js │ │ ├── TableFooter.js │ │ ├── TableHead.js │ │ ├── TableRow.js │ │ └── index.js │ ├── Tooltip │ │ ├── Tooltip.js │ │ ├── Tooltip.mdx │ │ └── index.js │ └── Width │ │ ├── Width.js │ │ ├── Width.mdx │ │ └── index.js ├── index.js └── index.mdx └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "es2015", 4 | "react", 5 | "stage-1" 6 | ], 7 | "plugins": [ 8 | "transform-class-properties" 9 | ] 10 | } 11 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | lib 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | coverage 8 | .coverage 9 | .nyc_output 10 | node_modules/ 11 | jspm_packages/ 12 | .npm 13 | .yarn-integrity 14 | .docz/ 15 | .netlify/ 16 | .idea/ 17 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .coverage 2 | *.mdx 3 | docs 4 | src 5 | test 6 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: false 2 | 3 | language: node_js 4 | 5 | node_js: 6 | - node 7 | 8 | before_install: 9 | - npm i -g npm@latest 10 | 11 | script: 12 | - npm run bundle 13 | 14 | notifications: 15 | email: 16 | on_success: never 17 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Ompmega 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![react-uikit](https://cdn-std.dprcdn.net/files/acc_649651/giLUIa?download) 2 | 3 | # React UIkit · [![Build Status](https://travis-ci.com/ompmega/react-uikit.svg?branch=master)](https://travis-ci.com/ompmega/react-uikit) 4 | UIkit components for ReactJS. 5 | 6 | ## Getting Started 7 | - Install UIkit [here](https://github.com/uikit/uikit#getting-started) 8 | - Install React UIkit using `yarn add react-uikit` or `npm install react-uikit` 9 | 10 | ## Documentation 11 | * [React UIkit Docs](https://react-uikit.ompmega.com) 12 | * [UIkit Docs](https://getuikit.com/docs/introduction) 13 | 14 | ## License 15 | MIT 16 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | {{ title }} 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | -------------------------------------------------------------------------------- /doczrc.js: -------------------------------------------------------------------------------- 1 | import { babel } from 'docz-plugin-babel6' 2 | 3 | export default { 4 | title: 'react-uikit', 5 | indexHtml: './docs/index.html', 6 | plugins: [babel()], 7 | themeConfig: { 8 | logo: { 9 | src: 'https://cdn-std.dprcdn.net/files/acc_649651/giLUIa?download', 10 | width: 170, 11 | }, 12 | }, 13 | } 14 | -------------------------------------------------------------------------------- /lib/components/Alert/AlertClose.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | 7 | var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; 8 | 9 | var _react = require('react'); 10 | 11 | var _react2 = _interopRequireDefault(_react); 12 | 13 | var _classnames = require('classnames'); 14 | 15 | var _classnames2 = _interopRequireDefault(_classnames); 16 | 17 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 18 | 19 | function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } 20 | 21 | var AlertClose = function AlertClose(props) { 22 | var customClassName = props.className, 23 | component = props.component, 24 | rest = _objectWithoutProperties(props, ['className', 'component']); 25 | 26 | var className = (0, _classnames2.default)(customClassName, 'uk-alert-close'); 27 | 28 | return _react2.default.createElement(component, _extends({ 29 | className: className, 30 | 'data-uk-close': '' 31 | }, rest)); 32 | }; 33 | 34 | AlertClose.defaultProps = { 35 | component: 'a' 36 | }; 37 | 38 | exports.default = AlertClose; -------------------------------------------------------------------------------- /lib/components/Alert/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | exports.AlertClose = undefined; 7 | 8 | var _Alert = require('./Alert'); 9 | 10 | var _Alert2 = _interopRequireDefault(_Alert); 11 | 12 | var _AlertClose2 = require('./AlertClose'); 13 | 14 | var _AlertClose3 = _interopRequireDefault(_AlertClose2); 15 | 16 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 17 | 18 | exports.default = _Alert2.default; 19 | exports.AlertClose = _AlertClose3.default; -------------------------------------------------------------------------------- /lib/components/Badge/Badge.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | 7 | var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; 8 | 9 | var _react = require('react'); 10 | 11 | var _react2 = _interopRequireDefault(_react); 12 | 13 | var _classnames = require('classnames'); 14 | 15 | var _classnames2 = _interopRequireDefault(_classnames); 16 | 17 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 18 | 19 | function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } 20 | 21 | var Badge = function Badge(props) { 22 | var customClassName = props.className, 23 | component = props.component, 24 | rest = _objectWithoutProperties(props, ['className', 'component']); 25 | 26 | var className = (0, _classnames2.default)(customClassName, 'uk-badge'); 27 | 28 | return _react2.default.createElement(component, _extends({ 29 | className: className 30 | }, rest)); 31 | }; 32 | 33 | Badge.defaultProps = { 34 | component: 'span' 35 | }; 36 | 37 | exports.default = Badge; -------------------------------------------------------------------------------- /lib/components/Badge/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | 7 | var _Badge = require('./Badge'); 8 | 9 | var _Badge2 = _interopRequireDefault(_Badge); 10 | 11 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 12 | 13 | exports.default = _Badge2.default; -------------------------------------------------------------------------------- /lib/components/Button/Button.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | 7 | var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; 8 | 9 | var _react = require('react'); 10 | 11 | var _react2 = _interopRequireDefault(_react); 12 | 13 | var _propTypes = require('prop-types'); 14 | 15 | var _propTypes2 = _interopRequireDefault(_propTypes); 16 | 17 | var _classnames = require('classnames'); 18 | 19 | var _classnames2 = _interopRequireDefault(_classnames); 20 | 21 | var _ButtonGroup = require('./ButtonGroup'); 22 | 23 | var _ButtonGroup2 = _interopRequireDefault(_ButtonGroup); 24 | 25 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 26 | 27 | function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } 28 | 29 | function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } 30 | 31 | var Button = function Button(props) { 32 | var _classNames; 33 | 34 | var customClassName = props.className, 35 | component = props.component, 36 | variant = props.variant, 37 | small = props.small, 38 | large = props.large, 39 | href = props.href, 40 | type = props.type, 41 | block = props.block, 42 | size = props.size, 43 | rest = _objectWithoutProperties(props, ['className', 'component', 'variant', 'small', 'large', 'href', 'type', 'block', 'size']); 44 | 45 | var className = (0, _classnames2.default)(customClassName, 'uk-button', (_classNames = {}, _defineProperty(_classNames, 'uk-button-' + variant, variant), _defineProperty(_classNames, 'uk-button-small', small || size === 'small'), _defineProperty(_classNames, 'uk-button-large', large || size === 'large'), _defineProperty(_classNames, 'uk-width-1-1', block), _classNames)); 46 | 47 | if (!!href) return _react2.default.createElement('a', _extends({ 48 | href: href, 49 | className: className 50 | }, rest)); 51 | 52 | if (component === 'button') return _react2.default.createElement('button', _extends({ 53 | type: type, 54 | className: className 55 | }, rest)); 56 | 57 | return _react2.default.createElement(component, _extends({ 58 | className: className 59 | }, rest)); 60 | }; 61 | 62 | Button.propTypes = { 63 | variant: _propTypes2.default.oneOf(['default', 'primary', 'secondary', 'danger', 'text', 'link']), 64 | size: _propTypes2.default.oneOf(['small', 'large']), 65 | small: _propTypes2.default.bool, 66 | large: _propTypes2.default.bool, 67 | block: _propTypes2.default.bool 68 | }; 69 | 70 | Button.defaultProps = { 71 | component: 'button', 72 | type: 'button', 73 | variant: 'default', 74 | small: false, 75 | large: false, 76 | block: false 77 | 78 | // Sub-components 79 | };Button.Group = _ButtonGroup2.default; 80 | 81 | exports.default = Button; -------------------------------------------------------------------------------- /lib/components/Button/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | exports.ButtonGroup = undefined; 7 | 8 | var _Button = require('./Button'); 9 | 10 | var _Button2 = _interopRequireDefault(_Button); 11 | 12 | var _ButtonGroup2 = require('./ButtonGroup'); 13 | 14 | var _ButtonGroup3 = _interopRequireDefault(_ButtonGroup2); 15 | 16 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 17 | 18 | exports.default = _Button2.default; 19 | exports.ButtonGroup = _ButtonGroup3.default; -------------------------------------------------------------------------------- /lib/components/Card/Card.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | 7 | var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; 8 | 9 | var _react = require('react'); 10 | 11 | var _react2 = _interopRequireDefault(_react); 12 | 13 | var _propTypes = require('prop-types'); 14 | 15 | var _propTypes2 = _interopRequireDefault(_propTypes); 16 | 17 | var _classnames = require('classnames'); 18 | 19 | var _classnames2 = _interopRequireDefault(_classnames); 20 | 21 | var _CardTitle = require('./CardTitle'); 22 | 23 | var _CardTitle2 = _interopRequireDefault(_CardTitle); 24 | 25 | var _CardBody = require('./CardBody'); 26 | 27 | var _CardBody2 = _interopRequireDefault(_CardBody); 28 | 29 | var _CardHeader = require('./CardHeader'); 30 | 31 | var _CardHeader2 = _interopRequireDefault(_CardHeader); 32 | 33 | var _CardFooter = require('./CardFooter'); 34 | 35 | var _CardFooter2 = _interopRequireDefault(_CardFooter); 36 | 37 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 38 | 39 | function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } 40 | 41 | function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } 42 | 43 | var Card = function Card(props) { 44 | var _classNames; 45 | 46 | var customClassName = props.className, 47 | component = props.component, 48 | variant = props.variant, 49 | body = props.body, 50 | rest = _objectWithoutProperties(props, ['className', 'component', 'variant', 'body']); 51 | 52 | var className = (0, _classnames2.default)(customClassName, 'uk-card', (_classNames = {}, _defineProperty(_classNames, 'uk-card-' + variant, !!variant), _defineProperty(_classNames, 'uk-card-body', body), _classNames)); 53 | 54 | return _react2.default.createElement(component, _extends({ 55 | className: className 56 | }, rest)); 57 | }; 58 | 59 | Card.propTypes = { 60 | variant: _propTypes2.default.oneOf(['default', 'primary', 'secondary']), 61 | body: _propTypes2.default.bool 62 | }; 63 | 64 | Card.defaultProps = { 65 | component: 'div', 66 | variant: 'default', 67 | body: false 68 | 69 | // Sub-components 70 | };Card.Title = _CardTitle2.default; 71 | Card.Body = _CardBody2.default; 72 | Card.Header = _CardHeader2.default; 73 | Card.Footer = _CardFooter2.default; 74 | 75 | exports.default = Card; -------------------------------------------------------------------------------- /lib/components/Card/CardBody.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | 7 | var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; 8 | 9 | var _react = require('react'); 10 | 11 | var _react2 = _interopRequireDefault(_react); 12 | 13 | var _classnames = require('classnames'); 14 | 15 | var _classnames2 = _interopRequireDefault(_classnames); 16 | 17 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 18 | 19 | function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } 20 | 21 | var CardBody = function CardBody(props) { 22 | var customClassName = props.className, 23 | component = props.component, 24 | rest = _objectWithoutProperties(props, ['className', 'component']); 25 | 26 | var className = (0, _classnames2.default)(customClassName, 'uk-card-body'); 27 | 28 | return _react2.default.createElement(component, _extends({ 29 | className: className 30 | }, rest)); 31 | }; 32 | 33 | CardBody.defaultProps = { 34 | component: 'div' 35 | }; 36 | 37 | exports.default = CardBody; -------------------------------------------------------------------------------- /lib/components/Card/CardFooter.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | 7 | var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; 8 | 9 | var _react = require('react'); 10 | 11 | var _react2 = _interopRequireDefault(_react); 12 | 13 | var _classnames = require('classnames'); 14 | 15 | var _classnames2 = _interopRequireDefault(_classnames); 16 | 17 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 18 | 19 | function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } 20 | 21 | var CardFooter = function CardFooter(props) { 22 | var customClassName = props.className, 23 | component = props.component, 24 | rest = _objectWithoutProperties(props, ['className', 'component']); 25 | 26 | var className = (0, _classnames2.default)(customClassName, 'uk-card-footer'); 27 | 28 | return _react2.default.createElement(component, _extends({ 29 | className: className 30 | }, rest)); 31 | }; 32 | 33 | CardFooter.defaultProps = { 34 | component: 'div' 35 | }; 36 | 37 | exports.default = CardFooter; -------------------------------------------------------------------------------- /lib/components/Card/CardHeader.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | 7 | var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; 8 | 9 | var _react = require('react'); 10 | 11 | var _react2 = _interopRequireDefault(_react); 12 | 13 | var _propTypes = require('prop-types'); 14 | 15 | var _propTypes2 = _interopRequireDefault(_propTypes); 16 | 17 | var _classnames = require('classnames'); 18 | 19 | var _classnames2 = _interopRequireDefault(_classnames); 20 | 21 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 22 | 23 | function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } 24 | 25 | var CardHeader = function CardHeader(props) { 26 | var customClassName = props.className, 27 | component = props.component, 28 | rest = _objectWithoutProperties(props, ['className', 'component']); 29 | 30 | var className = (0, _classnames2.default)(customClassName, 'uk-card-header'); 31 | 32 | return _react2.default.createElement(component, _extends({ 33 | className: className 34 | }, rest)); 35 | }; 36 | 37 | CardHeader.defaultProps = { 38 | component: 'div' 39 | }; 40 | 41 | exports.default = CardHeader; -------------------------------------------------------------------------------- /lib/components/Card/CardTitle.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | 7 | var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; 8 | 9 | var _react = require('react'); 10 | 11 | var _react2 = _interopRequireDefault(_react); 12 | 13 | var _classnames = require('classnames'); 14 | 15 | var _classnames2 = _interopRequireDefault(_classnames); 16 | 17 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 18 | 19 | function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } 20 | 21 | var CardTitle = function CardTitle(props) { 22 | var customClassName = props.className, 23 | component = props.component, 24 | rest = _objectWithoutProperties(props, ['className', 'component']); 25 | 26 | var className = (0, _classnames2.default)(customClassName, 'uk-card-title'); 27 | 28 | return _react2.default.createElement(component, _extends({ 29 | className: className 30 | }, rest)); 31 | }; 32 | 33 | CardTitle.defaultProps = { 34 | component: 'h3' 35 | }; 36 | 37 | exports.default = CardTitle; -------------------------------------------------------------------------------- /lib/components/Card/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | exports.CardFooter = exports.CardHeader = exports.CardBody = exports.CardTitle = undefined; 7 | 8 | var _Card = require('./Card'); 9 | 10 | var _Card2 = _interopRequireDefault(_Card); 11 | 12 | var _CardTitle2 = require('./CardTitle'); 13 | 14 | var _CardTitle3 = _interopRequireDefault(_CardTitle2); 15 | 16 | var _CardBody2 = require('./CardBody'); 17 | 18 | var _CardBody3 = _interopRequireDefault(_CardBody2); 19 | 20 | var _CardHeader2 = require('./CardHeader'); 21 | 22 | var _CardHeader3 = _interopRequireDefault(_CardHeader2); 23 | 24 | var _CardFooter2 = require('./CardFooter'); 25 | 26 | var _CardFooter3 = _interopRequireDefault(_CardFooter2); 27 | 28 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 29 | 30 | exports.default = _Card2.default; 31 | exports.CardTitle = _CardTitle3.default; 32 | exports.CardBody = _CardBody3.default; 33 | exports.CardHeader = _CardHeader3.default; 34 | exports.CardFooter = _CardFooter3.default; -------------------------------------------------------------------------------- /lib/components/Container/Container.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | 7 | var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; 8 | 9 | var _react = require('react'); 10 | 11 | var _react2 = _interopRequireDefault(_react); 12 | 13 | var _classnames = require('classnames'); 14 | 15 | var _classnames2 = _interopRequireDefault(_classnames); 16 | 17 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 18 | 19 | function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } 20 | 21 | var Container = function Container(props) { 22 | var customClassName = props.className, 23 | component = props.component, 24 | rest = _objectWithoutProperties(props, ['className', 'component']); 25 | 26 | var className = (0, _classnames2.default)(customClassName, 'uk-container'); 27 | 28 | return _react2.default.createElement(component, _extends({ 29 | className: className 30 | }, rest)); 31 | }; 32 | 33 | Container.defaultProps = { 34 | component: 'div' 35 | }; 36 | 37 | exports.default = Container; -------------------------------------------------------------------------------- /lib/components/Container/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | 7 | var _Container = require('./Container'); 8 | 9 | var _Container2 = _interopRequireDefault(_Container); 10 | 11 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 12 | 13 | exports.default = _Container2.default; -------------------------------------------------------------------------------- /lib/components/Divider/Divider.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | 7 | var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; 8 | 9 | var _react = require('react'); 10 | 11 | var _react2 = _interopRequireDefault(_react); 12 | 13 | var _propTypes = require('prop-types'); 14 | 15 | var _propTypes2 = _interopRequireDefault(_propTypes); 16 | 17 | var _classnames = require('classnames'); 18 | 19 | var _classnames2 = _interopRequireDefault(_classnames); 20 | 21 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 22 | 23 | function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } 24 | 25 | var Divider = function Divider(props) { 26 | var customClassName = props.className, 27 | component = props.component, 28 | icon = props.icon, 29 | small = props.small, 30 | rest = _objectWithoutProperties(props, ['className', 'component', 'icon', 'small']); 31 | 32 | var className = (0, _classnames2.default)(customClassName, { 33 | 'uk-divider-icon': icon, 34 | 'uk-divider-small': small 35 | }); 36 | 37 | return _react2.default.createElement(component, _extends({ 38 | className: className 39 | }, rest)); 40 | }; 41 | 42 | Divider.propTypes = { 43 | icon: _propTypes2.default.bool, 44 | small: _propTypes2.default.bool 45 | }; 46 | 47 | Divider.defaultProps = { 48 | component: 'hr', 49 | icon: false, 50 | small: false 51 | }; 52 | 53 | exports.default = Divider; -------------------------------------------------------------------------------- /lib/components/Divider/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | 7 | var _Divider = require('./Divider'); 8 | 9 | var _Divider2 = _interopRequireDefault(_Divider); 10 | 11 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 12 | 13 | exports.default = _Divider2.default; -------------------------------------------------------------------------------- /lib/components/Drop/DropContainer.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | 7 | var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; 8 | 9 | var _react = require('react'); 10 | 11 | var _react2 = _interopRequireDefault(_react); 12 | 13 | var _classnames = require('classnames'); 14 | 15 | var _classnames2 = _interopRequireDefault(_classnames); 16 | 17 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 18 | 19 | function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } 20 | 21 | var DropContainer = function DropContainer(props) { 22 | var customClassName = props.className, 23 | component = props.component, 24 | rest = _objectWithoutProperties(props, ['className', 'component']); 25 | 26 | var className = (0, _classnames2.default)(customClassName, 'uk-inline'); 27 | 28 | return _react2.default.createElement(component, _extends({ 29 | className: className 30 | }, rest)); 31 | }; 32 | 33 | DropContainer.defaultProps = { 34 | component: 'div' 35 | }; 36 | 37 | exports.default = DropContainer; -------------------------------------------------------------------------------- /lib/components/Drop/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | exports.DropContainer = undefined; 7 | 8 | var _Drop = require('./Drop'); 9 | 10 | var _Drop2 = _interopRequireDefault(_Drop); 11 | 12 | var _DropContainer2 = require('./DropContainer'); 13 | 14 | var _DropContainer3 = _interopRequireDefault(_DropContainer2); 15 | 16 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 17 | 18 | exports.default = _Drop2.default; 19 | exports.DropContainer = _DropContainer3.default; -------------------------------------------------------------------------------- /lib/components/Dropdown/Dropdown.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | 7 | var _react = require('react'); 8 | 9 | var _react2 = _interopRequireDefault(_react); 10 | 11 | var _uikit = require('uikit'); 12 | 13 | var _uikit2 = _interopRequireDefault(_uikit); 14 | 15 | var _Drop2 = require('../Drop/Drop'); 16 | 17 | var _Drop3 = _interopRequireDefault(_Drop2); 18 | 19 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 20 | 21 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 22 | 23 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } 24 | 25 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } 26 | 27 | var Dropdown = function (_Drop) { 28 | _inherits(Dropdown, _Drop); 29 | 30 | function Dropdown() { 31 | var _ref; 32 | 33 | var _temp, _this, _ret; 34 | 35 | _classCallCheck(this, Dropdown); 36 | 37 | for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { 38 | args[_key] = arguments[_key]; 39 | } 40 | 41 | return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Dropdown.__proto__ || Object.getPrototypeOf(Dropdown)).call.apply(_ref, [this].concat(args))), _this), _this.registerComponent = function () { 42 | _this.component = _uikit2.default.dropdown(_this.node, _this.getOptions()); 43 | }, _temp), _possibleConstructorReturn(_this, _ret); 44 | } 45 | 46 | return Dropdown; 47 | }(_Drop3.default); 48 | 49 | // Sub-component 50 | 51 | 52 | Dropdown.Container = _Drop3.default.Container; 53 | 54 | exports.default = Dropdown; -------------------------------------------------------------------------------- /lib/components/Dropdown/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | exports.DropdownContainer = undefined; 7 | 8 | var _Dropdown = require('./Dropdown'); 9 | 10 | var _Dropdown2 = _interopRequireDefault(_Dropdown); 11 | 12 | var _DropContainer = require('../Drop/DropContainer'); 13 | 14 | var _DropContainer2 = _interopRequireDefault(_DropContainer); 15 | 16 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 17 | 18 | exports.default = _Dropdown2.default; 19 | exports.DropdownContainer = _DropContainer2.default; -------------------------------------------------------------------------------- /lib/components/Flex/Flex.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | 7 | var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; 8 | 9 | var _react = require('react'); 10 | 11 | var _react2 = _interopRequireDefault(_react); 12 | 13 | var _propTypes = require('prop-types'); 14 | 15 | var _propTypes2 = _interopRequireDefault(_propTypes); 16 | 17 | var _classnames = require('classnames'); 18 | 19 | var _classnames2 = _interopRequireDefault(_classnames); 20 | 21 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 22 | 23 | function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } 24 | 25 | function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } 26 | 27 | var Flex = function Flex(props) { 28 | var component = props.component, 29 | customClassName = props.className, 30 | inline = props.inline, 31 | align = props.align, 32 | rest = _objectWithoutProperties(props, ['component', 'className', 'inline', 'align']); 33 | 34 | var className = (0, _classnames2.default)(customClassName, _defineProperty({ 35 | 'uk-flex': !inline, 36 | 'uk-flex-inline': inline 37 | }, 'uk-flex-' + align, !!align)); 38 | 39 | return _react2.default.createElement(component, _extends({ 40 | className: className 41 | }, rest)); 42 | }; 43 | 44 | Flex.propTypes = { 45 | inline: _propTypes2.default.bool, 46 | align: _propTypes2.default.oneOf(['left', 'center', 'right', 'between', 'around', 'stretch', 'top', 'middle', 'bottom']) 47 | }; 48 | 49 | Flex.defaultProps = { 50 | component: 'div', 51 | inline: false 52 | }; 53 | 54 | exports.default = Flex; -------------------------------------------------------------------------------- /lib/components/Flex/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | 7 | var _Flex = require('./Flex'); 8 | 9 | var _Flex2 = _interopRequireDefault(_Flex); 10 | 11 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 12 | 13 | exports.default = _Flex2.default; -------------------------------------------------------------------------------- /lib/components/Form/Form.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | 7 | var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; 8 | 9 | var _react = require('react'); 10 | 11 | var _react2 = _interopRequireDefault(_react); 12 | 13 | var _propTypes = require('prop-types'); 14 | 15 | var _propTypes2 = _interopRequireDefault(_propTypes); 16 | 17 | var _classnames = require('classnames'); 18 | 19 | var _classnames2 = _interopRequireDefault(_classnames); 20 | 21 | var _FormFieldset = require('./FormFieldset'); 22 | 23 | var _FormFieldset2 = _interopRequireDefault(_FormFieldset); 24 | 25 | var _FormLegend = require('./FormLegend'); 26 | 27 | var _FormLegend2 = _interopRequireDefault(_FormLegend); 28 | 29 | var _FormControls = require('./FormControls'); 30 | 31 | var _FormControls2 = _interopRequireDefault(_FormControls); 32 | 33 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 34 | 35 | function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } 36 | 37 | var Form = function Form(props) { 38 | var customClassName = props.className, 39 | stacked = props.stacked, 40 | horizontal = props.horizontal, 41 | rest = _objectWithoutProperties(props, ['className', 'stacked', 'horizontal']); 42 | 43 | var className = (0, _classnames2.default)(customClassName, { 44 | 'uk-form-stacked': stacked, 45 | 'uk-form-horizontal': horizontal 46 | }); 47 | 48 | return _react2.default.createElement('form', _extends({ 49 | className: className 50 | }, rest)); 51 | }; 52 | 53 | Form.propTypes = { 54 | onSubmit: _propTypes2.default.any, 55 | method: _propTypes2.default.oneOf(['get', 'post']), 56 | action: _propTypes2.default.string, 57 | stacked: _propTypes2.default.bool, 58 | horizontal: _propTypes2.default.bool 59 | }; 60 | 61 | Form.defaultProps = { 62 | stacked: false, 63 | horizontal: false 64 | 65 | // Sub-components 66 | };Form.Fieldset = _FormFieldset2.default; 67 | Form.Legend = _FormLegend2.default; 68 | Form.Controls = _FormControls2.default; 69 | 70 | exports.default = Form; -------------------------------------------------------------------------------- /lib/components/Form/FormControls.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | 7 | var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; 8 | 9 | var _react = require('react'); 10 | 11 | var _react2 = _interopRequireDefault(_react); 12 | 13 | var _classnames = require('classnames'); 14 | 15 | var _classnames2 = _interopRequireDefault(_classnames); 16 | 17 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 18 | 19 | function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } 20 | 21 | var FormControls = function FormControls(props) { 22 | var customClassName = props.className, 23 | component = props.component, 24 | rest = _objectWithoutProperties(props, ['className', 'component']); 25 | 26 | var className = (0, _classnames2.default)(customClassName, 'uk-form-controls'); 27 | 28 | return _react2.default.createElement(component, _extends({ 29 | className: className 30 | }, rest)); 31 | }; 32 | 33 | FormControls.defaultProps = { 34 | component: 'div' 35 | }; 36 | 37 | exports.default = FormControls; -------------------------------------------------------------------------------- /lib/components/Form/FormFieldset.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | 7 | var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; 8 | 9 | var _react = require('react'); 10 | 11 | var _react2 = _interopRequireDefault(_react); 12 | 13 | var _classnames = require('classnames'); 14 | 15 | var _classnames2 = _interopRequireDefault(_classnames); 16 | 17 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 18 | 19 | function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } 20 | 21 | var FormFieldset = function FormFieldset(props) { 22 | var customClassName = props.className, 23 | rest = _objectWithoutProperties(props, ['className']); 24 | 25 | var className = (0, _classnames2.default)(customClassName, 'uk-fieldset'); 26 | 27 | return _react2.default.createElement('fieldset', _extends({ 28 | className: className 29 | }, rest)); 30 | }; 31 | 32 | exports.default = FormFieldset; -------------------------------------------------------------------------------- /lib/components/Form/FormLegend.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | 7 | var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; 8 | 9 | var _react = require('react'); 10 | 11 | var _react2 = _interopRequireDefault(_react); 12 | 13 | var _classnames = require('classnames'); 14 | 15 | var _classnames2 = _interopRequireDefault(_classnames); 16 | 17 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 18 | 19 | function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } 20 | 21 | var FormLegend = function FormLegend(props) { 22 | var customClassName = props.className, 23 | rest = _objectWithoutProperties(props, ['className']); 24 | 25 | var className = (0, _classnames2.default)(customClassName, 'uk-legend'); 26 | 27 | return _react2.default.createElement('legend', _extends({ 28 | className: className 29 | }, rest)); 30 | }; 31 | 32 | exports.default = FormLegend; -------------------------------------------------------------------------------- /lib/components/Form/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | exports.FormControls = exports.FormLegend = exports.FormFieldset = undefined; 7 | 8 | var _Form = require('./Form'); 9 | 10 | var _Form2 = _interopRequireDefault(_Form); 11 | 12 | var _FormFieldset2 = require('./FormFieldset'); 13 | 14 | var _FormFieldset3 = _interopRequireDefault(_FormFieldset2); 15 | 16 | var _FormLegend2 = require('./FormLegend'); 17 | 18 | var _FormLegend3 = _interopRequireDefault(_FormLegend2); 19 | 20 | var _FormControls2 = require('./FormControls'); 21 | 22 | var _FormControls3 = _interopRequireDefault(_FormControls2); 23 | 24 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 25 | 26 | exports.default = _Form2.default; 27 | exports.FormFieldset = _FormFieldset3.default; 28 | exports.FormLegend = _FormLegend3.default; 29 | exports.FormControls = _FormControls3.default; -------------------------------------------------------------------------------- /lib/components/Grid/Grid.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | 7 | var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; 8 | 9 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); 10 | 11 | var _react = require('react'); 12 | 13 | var _react2 = _interopRequireDefault(_react); 14 | 15 | var _propTypes = require('prop-types'); 16 | 17 | var _propTypes2 = _interopRequireDefault(_propTypes); 18 | 19 | var _classnames = require('classnames'); 20 | 21 | var _classnames2 = _interopRequireDefault(_classnames); 22 | 23 | var _uikit = require('uikit'); 24 | 25 | var _uikit2 = _interopRequireDefault(_uikit); 26 | 27 | var _GridItem = require('./GridItem'); 28 | 29 | var _GridItem2 = _interopRequireDefault(_GridItem); 30 | 31 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 32 | 33 | function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } 34 | 35 | function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } 36 | 37 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 38 | 39 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } 40 | 41 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } 42 | 43 | var widthSizes = ['1-1', '1-2', '1-3', '2-3', '1-4', '3-4', '1-5', '4-5', '1-6', '5-6', 'auto', 'expand']; 44 | 45 | var Grid = function (_React$Component) { 46 | _inherits(Grid, _React$Component); 47 | 48 | function Grid() { 49 | var _ref; 50 | 51 | var _temp, _this, _ret; 52 | 53 | _classCallCheck(this, Grid); 54 | 55 | for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { 56 | args[_key] = arguments[_key]; 57 | } 58 | 59 | return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Grid.__proto__ || Object.getPrototypeOf(Grid)).call.apply(_ref, [this].concat(args))), _this), _this.setRef = function (ref) { 60 | return _this.node = ref; 61 | }, _temp), _possibleConstructorReturn(_this, _ret); 62 | } 63 | 64 | _createClass(Grid, [{ 65 | key: 'componentDidMount', 66 | value: function componentDidMount() { 67 | this.component = _uikit2.default.grid(this.node); 68 | } 69 | }, { 70 | key: 'render', 71 | value: function render() { 72 | var _classNames; 73 | 74 | var _props = this.props, 75 | customClassName = _props.className, 76 | component = _props.component, 77 | gutter = _props.gutter, 78 | divider = _props.divider, 79 | match = _props.match, 80 | xs = _props.xs, 81 | sm = _props.sm, 82 | md = _props.md, 83 | lg = _props.lg, 84 | xl = _props.xl, 85 | rest = _objectWithoutProperties(_props, ['className', 'component', 'gutter', 'divider', 'match', 'xs', 'sm', 'md', 'lg', 'xl']); 86 | 87 | var className = (0, _classnames2.default)(customClassName, (_classNames = {}, _defineProperty(_classNames, 'uk-grid-' + gutter, gutter), _defineProperty(_classNames, 'uk-grid-divider', divider), _defineProperty(_classNames, 'uk-grid-match', match), _defineProperty(_classNames, 'uk-child-width-' + xs, !!xs), _defineProperty(_classNames, 'uk-child-width-' + sm + '@s', !!sm), _defineProperty(_classNames, 'uk-child-width-' + md + '@m', !!md), _defineProperty(_classNames, 'uk-child-width-' + lg + '@l', !!lg), _defineProperty(_classNames, 'uk-child-width-' + xl + '@xl', !!xl), _classNames)); 88 | 89 | return _react2.default.createElement(component, _extends({ 90 | ref: this.setRef, 91 | className: className 92 | }, rest)); 93 | } 94 | }]); 95 | 96 | return Grid; 97 | }(_react2.default.Component); 98 | 99 | Grid.propTypes = { 100 | className: _propTypes2.default.string, 101 | gutter: _propTypes2.default.string, 102 | divider: _propTypes2.default.bool, 103 | match: _propTypes2.default.bool, 104 | xs: _propTypes2.default.oneOf(widthSizes), 105 | sm: _propTypes2.default.oneOf(widthSizes), 106 | md: _propTypes2.default.oneOf(widthSizes), 107 | lg: _propTypes2.default.oneOf(widthSizes), 108 | xl: _propTypes2.default.oneOf(widthSizes) 109 | }; 110 | Grid.defaultProps = { 111 | component: 'div', 112 | className: '', 113 | gutter: 'medium', 114 | divider: false, 115 | match: false 116 | }; 117 | 118 | 119 | Grid.Item = _GridItem2.default; 120 | 121 | exports.default = Grid; -------------------------------------------------------------------------------- /lib/components/Grid/GridItem.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | 7 | var _react = require('react'); 8 | 9 | var _react2 = _interopRequireDefault(_react); 10 | 11 | var _Width2 = require('../Width/Width'); 12 | 13 | var _Width3 = _interopRequireDefault(_Width2); 14 | 15 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 16 | 17 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 18 | 19 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } 20 | 21 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } 22 | 23 | var GridItem = function (_Width) { 24 | _inherits(GridItem, _Width); 25 | 26 | function GridItem() { 27 | _classCallCheck(this, GridItem); 28 | 29 | return _possibleConstructorReturn(this, (GridItem.__proto__ || Object.getPrototypeOf(GridItem)).apply(this, arguments)); 30 | } 31 | 32 | return GridItem; 33 | }(_Width3.default); 34 | 35 | exports.default = GridItem; -------------------------------------------------------------------------------- /lib/components/Grid/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | exports.GridItem = undefined; 7 | 8 | var _Grid = require('./Grid'); 9 | 10 | var _Grid2 = _interopRequireDefault(_Grid); 11 | 12 | var _GridItem2 = require('./GridItem'); 13 | 14 | var _GridItem3 = _interopRequireDefault(_GridItem2); 15 | 16 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 17 | 18 | exports.default = _Grid2.default; 19 | exports.GridItem = _GridItem3.default; -------------------------------------------------------------------------------- /lib/components/Input/Input.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | 7 | var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; 8 | 9 | var _react = require('react'); 10 | 11 | var _react2 = _interopRequireDefault(_react); 12 | 13 | var _propTypes = require('prop-types'); 14 | 15 | var _propTypes2 = _interopRequireDefault(_propTypes); 16 | 17 | var _classnames = require('classnames'); 18 | 19 | var _classnames2 = _interopRequireDefault(_classnames); 20 | 21 | var _InputLabel = require('./InputLabel'); 22 | 23 | var _InputLabel2 = _interopRequireDefault(_InputLabel); 24 | 25 | var _InputCheckbox = require('./InputCheckbox'); 26 | 27 | var _InputCheckbox2 = _interopRequireDefault(_InputCheckbox); 28 | 29 | var _InputRadio = require('./InputRadio'); 30 | 31 | var _InputRadio2 = _interopRequireDefault(_InputRadio); 32 | 33 | var _InputTextarea = require('./InputTextarea'); 34 | 35 | var _InputTextarea2 = _interopRequireDefault(_InputTextarea); 36 | 37 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 38 | 39 | function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } 40 | 41 | function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } 42 | 43 | var Input = function Input(props) { 44 | var customClassName = props.className, 45 | size = props.size, 46 | rest = _objectWithoutProperties(props, ['className', 'size']); 47 | 48 | var className = (0, _classnames2.default)(customClassName, 'uk-input', _defineProperty({}, 'uk-form-' + size, !!size)); 49 | 50 | return _react2.default.createElement('input', _extends({ 51 | className: className 52 | }, rest)); 53 | }; 54 | 55 | Input.propTypes = { 56 | placeholder: _propTypes2.default.string, 57 | value: _propTypes2.default.any, 58 | disabled: _propTypes2.default.bool, 59 | size: _propTypes2.default.oneOf(['small', 'large']) 60 | }; 61 | 62 | Input.defaultProps = { 63 | disabled: false 64 | 65 | // Sub-components 66 | };Input.Label = _InputLabel2.default; 67 | Input.Checkbox = _InputCheckbox2.default; 68 | Input.Radio = _InputRadio2.default; 69 | Input.Textarea = _InputTextarea2.default; 70 | 71 | exports.default = Input; -------------------------------------------------------------------------------- /lib/components/Input/InputCheckbox.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | 7 | var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; 8 | 9 | var _react = require('react'); 10 | 11 | var _react2 = _interopRequireDefault(_react); 12 | 13 | var _propTypes = require('prop-types'); 14 | 15 | var _propTypes2 = _interopRequireDefault(_propTypes); 16 | 17 | var _classnames = require('classnames'); 18 | 19 | var _classnames2 = _interopRequireDefault(_classnames); 20 | 21 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 22 | 23 | function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } 24 | 25 | var InputCheckbox = function InputCheckbox(props) { 26 | var customClassName = props.className, 27 | children = props.children, 28 | rest = _objectWithoutProperties(props, ['className', 'children']); 29 | 30 | var className = (0, _classnames2.default)(customClassName, 'uk-checkbox'); 31 | 32 | return _react2.default.createElement('input', _extends({ 33 | className: className, 34 | type: 'checkbox' 35 | }, rest)); 36 | }; 37 | 38 | InputCheckbox.propTypes = { 39 | name: _propTypes2.default.string, 40 | checked: _propTypes2.default.bool 41 | }; 42 | 43 | exports.default = InputCheckbox; -------------------------------------------------------------------------------- /lib/components/Input/InputLabel.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | 7 | var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; 8 | 9 | var _react = require('react'); 10 | 11 | var _react2 = _interopRequireDefault(_react); 12 | 13 | var _propTypes = require('prop-types'); 14 | 15 | var _propTypes2 = _interopRequireDefault(_propTypes); 16 | 17 | var _classnames = require('classnames'); 18 | 19 | var _classnames2 = _interopRequireDefault(_classnames); 20 | 21 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 22 | 23 | function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } 24 | 25 | var InputLabel = function InputLabel(props) { 26 | var customClassName = props.className, 27 | component = props.component, 28 | rest = _objectWithoutProperties(props, ['className', 'component']); 29 | 30 | var isElement = _react2.default.isValidElement(props.children[0]); 31 | 32 | var className = (0, _classnames2.default)(customClassName, { 33 | 'uk-form-label': !isElement 34 | }); 35 | 36 | return _react2.default.createElement(component, _extends({ 37 | className: className 38 | }, rest)); 39 | }; 40 | 41 | InputLabel.propTypes = { 42 | htmlFor: _propTypes2.default.string 43 | }; 44 | 45 | InputLabel.defaultProps = { 46 | component: 'label' 47 | }; 48 | 49 | exports.default = InputLabel; -------------------------------------------------------------------------------- /lib/components/Input/InputRadio.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | 7 | var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; 8 | 9 | var _react = require('react'); 10 | 11 | var _react2 = _interopRequireDefault(_react); 12 | 13 | var _propTypes = require('prop-types'); 14 | 15 | var _propTypes2 = _interopRequireDefault(_propTypes); 16 | 17 | var _classnames = require('classnames'); 18 | 19 | var _classnames2 = _interopRequireDefault(_classnames); 20 | 21 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 22 | 23 | function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } 24 | 25 | var InputRadio = function InputRadio(props) { 26 | var customClassName = props.className, 27 | children = props.children, 28 | rest = _objectWithoutProperties(props, ['className', 'children']); 29 | 30 | var className = (0, _classnames2.default)(customClassName, 'uk-radio'); 31 | 32 | return _react2.default.createElement('input', _extends({ 33 | className: className, 34 | type: 'radio' 35 | }, rest)); 36 | }; 37 | 38 | InputRadio.propTypes = { 39 | name: _propTypes2.default.string.isRequired 40 | }; 41 | 42 | exports.default = InputRadio; -------------------------------------------------------------------------------- /lib/components/Input/InputTextarea.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | 7 | var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; 8 | 9 | var _react = require('react'); 10 | 11 | var _react2 = _interopRequireDefault(_react); 12 | 13 | var _propTypes = require('prop-types'); 14 | 15 | var _propTypes2 = _interopRequireDefault(_propTypes); 16 | 17 | var _classnames = require('classnames'); 18 | 19 | var _classnames2 = _interopRequireDefault(_classnames); 20 | 21 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 22 | 23 | function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } 24 | 25 | var InputTextarea = function InputTextarea(props) { 26 | var customClassName = props.className, 27 | rows = props.rows, 28 | rest = _objectWithoutProperties(props, ['className', 'rows']); 29 | 30 | var className = (0, _classnames2.default)(customClassName, 'uk-textarea'); 31 | 32 | return _react2.default.createElement('textarea', _extends({ 33 | className: className, 34 | rows: rows 35 | }, rest)); 36 | }; 37 | 38 | InputTextarea.propTypes = { 39 | rows: _propTypes2.default.number, 40 | placeholder: _propTypes2.default.string, 41 | value: _propTypes2.default.any 42 | }; 43 | 44 | InputTextarea.defaultProps = { 45 | rows: 4 46 | }; 47 | 48 | exports.default = InputTextarea; -------------------------------------------------------------------------------- /lib/components/Input/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | exports.InputTextarea = exports.InputRadio = exports.InputCheckbox = exports.InputLabel = undefined; 7 | 8 | var _Input = require('./Input'); 9 | 10 | var _Input2 = _interopRequireDefault(_Input); 11 | 12 | var _InputLabel2 = require('./InputLabel'); 13 | 14 | var _InputLabel3 = _interopRequireDefault(_InputLabel2); 15 | 16 | var _InputCheckbox2 = require('./InputCheckbox'); 17 | 18 | var _InputCheckbox3 = _interopRequireDefault(_InputCheckbox2); 19 | 20 | var _InputRadio2 = require('./InputRadio'); 21 | 22 | var _InputRadio3 = _interopRequireDefault(_InputRadio2); 23 | 24 | var _InputTextarea2 = require('./InputTextarea'); 25 | 26 | var _InputTextarea3 = _interopRequireDefault(_InputTextarea2); 27 | 28 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 29 | 30 | exports.default = _Input2.default; 31 | exports.InputLabel = _InputLabel3.default; 32 | exports.InputCheckbox = _InputCheckbox3.default; 33 | exports.InputRadio = _InputRadio3.default; 34 | exports.InputTextarea = _InputTextarea3.default; -------------------------------------------------------------------------------- /lib/components/Label/Label.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | 7 | var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; 8 | 9 | var _react = require('react'); 10 | 11 | var _react2 = _interopRequireDefault(_react); 12 | 13 | var _propTypes = require('prop-types'); 14 | 15 | var _propTypes2 = _interopRequireDefault(_propTypes); 16 | 17 | var _classnames = require('classnames'); 18 | 19 | var _classnames2 = _interopRequireDefault(_classnames); 20 | 21 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 22 | 23 | function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } 24 | 25 | function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } 26 | 27 | var Label = function Label(props) { 28 | var customClassName = props.className, 29 | component = props.component, 30 | variant = props.variant, 31 | rest = _objectWithoutProperties(props, ['className', 'component', 'variant']); 32 | 33 | var className = (0, _classnames2.default)(customClassName, 'uk-label', _defineProperty({}, 'uk-label-' + variant, !!variant)); 34 | 35 | return _react2.default.createElement(component, _extends({ 36 | className: className 37 | }, rest)); 38 | }; 39 | 40 | Label.propTypes = { 41 | variant: _propTypes2.default.oneOf(['primary', 'success', 'warning', 'danger']) 42 | }; 43 | 44 | Label.defaultProps = { 45 | component: 'span' 46 | }; 47 | 48 | exports.default = Label; -------------------------------------------------------------------------------- /lib/components/Label/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | 7 | var _Label = require('./Label'); 8 | 9 | var _Label2 = _interopRequireDefault(_Label); 10 | 11 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 12 | 13 | exports.default = _Label2.default; -------------------------------------------------------------------------------- /lib/components/Margin/Margin.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | 7 | var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; 8 | 9 | var _react = require('react'); 10 | 11 | var _react2 = _interopRequireDefault(_react); 12 | 13 | var _propTypes = require('prop-types'); 14 | 15 | var _propTypes2 = _interopRequireDefault(_propTypes); 16 | 17 | var _classnames = require('classnames'); 18 | 19 | var _classnames2 = _interopRequireDefault(_classnames); 20 | 21 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 22 | 23 | function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } 24 | 25 | var Margin = function Margin(props) { 26 | var customClassName = props.className, 27 | component = props.component, 28 | dynamic = props.dynamic, 29 | rest = _objectWithoutProperties(props, ['className', 'component', 'dynamic']); 30 | 31 | var className = (0, _classnames2.default)(customClassName, 'uk-margin'); 32 | 33 | return _react2.default.createElement(component, _extends({ 34 | className: className 35 | }, dynamic ? { 'uk-margin': '' } : undefined, rest)); 36 | }; 37 | 38 | Margin.propTypes = { 39 | dynamic: _propTypes2.default.bool 40 | }; 41 | 42 | Margin.defaultProps = { 43 | component: 'div', 44 | dynamic: false 45 | }; 46 | 47 | exports.default = Margin; -------------------------------------------------------------------------------- /lib/components/Margin/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | 7 | var _Margin = require('./Margin'); 8 | 9 | var _Margin2 = _interopRequireDefault(_Margin); 10 | 11 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 12 | 13 | exports.default = _Margin2.default; -------------------------------------------------------------------------------- /lib/components/Modal/Modal.js: -------------------------------------------------------------------------------- 1 | /*import React from 'react' 2 | import PropTypes from 'prop-types' 3 | import { Portal } from 'react-portal' 4 | import _ from 'lodash' 5 | import classNames from 'classnames' 6 | 7 | class Modal extends React.Component { 8 | 9 | state = { 10 | isOpen: false 11 | } 12 | 13 | static propTypes = { 14 | open: PropTypes.bool 15 | } 16 | 17 | static defaultProps = { 18 | open: false 19 | } 20 | 21 | setRef = ref => this.node = ref 22 | 23 | handleClose = () => { 24 | setTimeout(() => { 25 | this.props.open = false 26 | }, 300) 27 | } 28 | 29 | render() { 30 | const { open } = this.props 31 | 32 | const className = classNames('uk-modal', { 33 | 'uk-open': open 34 | }) 35 | 36 | const style = { 37 | display: 'block' 38 | } 39 | 40 | return ( 41 | 45 |
49 |
50 | 51 | ) 52 | } 53 | } 54 | 55 | export default Modal 56 | */ 57 | "use strict"; -------------------------------------------------------------------------------- /lib/components/Progress/Progress.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | 7 | var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; 8 | 9 | var _react = require('react'); 10 | 11 | var _react2 = _interopRequireDefault(_react); 12 | 13 | var _propTypes = require('prop-types'); 14 | 15 | var _propTypes2 = _interopRequireDefault(_propTypes); 16 | 17 | var _classnames = require('classnames'); 18 | 19 | var _classnames2 = _interopRequireDefault(_classnames); 20 | 21 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 22 | 23 | function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } 24 | 25 | var Progress = function Progress(props) { 26 | var customClassName = props.className, 27 | children = props.children, 28 | rest = _objectWithoutProperties(props, ['className', 'children']); 29 | 30 | var className = (0, _classnames2.default)(customClassName, 'uk-progress'); 31 | 32 | return _react2.default.createElement('progress', _extends({ 33 | className: className 34 | }, rest)); 35 | }; 36 | 37 | Progress.propTypes = { 38 | value: _propTypes2.default.number, 39 | max: _propTypes2.default.number 40 | }; 41 | 42 | Progress.defaultProps = { 43 | value: 0, 44 | max: 100 45 | }; 46 | 47 | exports.default = Progress; -------------------------------------------------------------------------------- /lib/components/Progress/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | 7 | var _Progress = require('./Progress'); 8 | 9 | var _Progress2 = _interopRequireDefault(_Progress); 10 | 11 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 12 | 13 | exports.default = _Progress2.default; -------------------------------------------------------------------------------- /lib/components/Select/Select.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | 7 | var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; 8 | 9 | var _react = require('react'); 10 | 11 | var _react2 = _interopRequireDefault(_react); 12 | 13 | var _propTypes = require('prop-types'); 14 | 15 | var _propTypes2 = _interopRequireDefault(_propTypes); 16 | 17 | var _classnames = require('classnames'); 18 | 19 | var _classnames2 = _interopRequireDefault(_classnames); 20 | 21 | var _SelectOption = require('./SelectOption'); 22 | 23 | var _SelectOption2 = _interopRequireDefault(_SelectOption); 24 | 25 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 26 | 27 | function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } 28 | 29 | function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } 30 | 31 | var Select = function Select(props) { 32 | var _classNames; 33 | 34 | var customClassName = props.className, 35 | size = props.size, 36 | blank = props.blank, 37 | rest = _objectWithoutProperties(props, ['className', 'size', 'blank']); 38 | 39 | var className = (0, _classnames2.default)(customClassName, 'uk-select', (_classNames = {}, _defineProperty(_classNames, 'uk-form-' + size, !!size), _defineProperty(_classNames, 'uk-form-blank', blank), _classNames)); 40 | 41 | return _react2.default.createElement('select', _extends({ 42 | className: className 43 | }, rest)); 44 | }; 45 | 46 | Select.propTypes = { 47 | size: _propTypes2.default.oneOf(['large', 'small']), 48 | blank: _propTypes2.default.bool 49 | }; 50 | 51 | Select.defaultProps = { 52 | blank: false 53 | 54 | // Sub-components 55 | };Select.Option = _SelectOption2.default; 56 | 57 | exports.default = Select; -------------------------------------------------------------------------------- /lib/components/Select/SelectOption.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | 7 | var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; 8 | 9 | var _react = require('react'); 10 | 11 | var _react2 = _interopRequireDefault(_react); 12 | 13 | var _propTypes = require('prop-types'); 14 | 15 | var _propTypes2 = _interopRequireDefault(_propTypes); 16 | 17 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 18 | 19 | function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } 20 | 21 | var SelectOption = function SelectOption(props) { 22 | var className = props.className, 23 | value = props.value, 24 | rest = _objectWithoutProperties(props, ['className', 'value']); 25 | 26 | return _react2.default.createElement('option', _extends({ 27 | value: value 28 | }, rest)); 29 | }; 30 | 31 | SelectOption.propTypes = { 32 | children: _propTypes2.default.string, 33 | value: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]), 34 | name: _propTypes2.default.string 35 | }; 36 | 37 | SelectOption.defaultProps = { 38 | value: '' 39 | }; 40 | 41 | exports.default = SelectOption; -------------------------------------------------------------------------------- /lib/components/Select/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | exports.SelectOption = undefined; 7 | 8 | var _Select = require('./Select'); 9 | 10 | var _Select2 = _interopRequireDefault(_Select); 11 | 12 | var _SelectOption2 = require('./SelectOption'); 13 | 14 | var _SelectOption3 = _interopRequireDefault(_SelectOption2); 15 | 16 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 17 | 18 | exports.default = _Select2.default; 19 | exports.SelectOption = _SelectOption3.default; -------------------------------------------------------------------------------- /lib/components/Spinner/Spinner.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | 7 | var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; 8 | 9 | var _react = require('react'); 10 | 11 | var _react2 = _interopRequireDefault(_react); 12 | 13 | var _propTypes = require('prop-types'); 14 | 15 | var _propTypes2 = _interopRequireDefault(_propTypes); 16 | 17 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 18 | 19 | function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } 20 | 21 | var Progress = function Progress(props) { 22 | var customClassName = props.className, 23 | component = props.component, 24 | ratio = props.ratio, 25 | children = props.children, 26 | rest = _objectWithoutProperties(props, ['className', 'component', 'ratio', 'children']); 27 | 28 | return _react2.default.createElement(component, _extends({ 29 | 'uk-spinner': '' 30 | }, rest)); 31 | }; 32 | 33 | Progress.propTypes = { 34 | ratio: _propTypes2.default.number 35 | }; 36 | 37 | Progress.defaultProps = { 38 | component: 'div' 39 | }; 40 | 41 | exports.default = Progress; -------------------------------------------------------------------------------- /lib/components/Spinner/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | 7 | var _Spinner = require('./Spinner'); 8 | 9 | var _Spinner2 = _interopRequireDefault(_Spinner); 10 | 11 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 12 | 13 | exports.default = _Spinner2.default; -------------------------------------------------------------------------------- /lib/components/Tab/Tab.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | 7 | var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; 8 | 9 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); 10 | 11 | var _react = require('react'); 12 | 13 | var _react2 = _interopRequireDefault(_react); 14 | 15 | var _propTypes = require('prop-types'); 16 | 17 | var _propTypes2 = _interopRequireDefault(_propTypes); 18 | 19 | var _classnames = require('classnames'); 20 | 21 | var _classnames2 = _interopRequireDefault(_classnames); 22 | 23 | var _uikit = require('uikit'); 24 | 25 | var _uikit2 = _interopRequireDefault(_uikit); 26 | 27 | var _TabItem = require('./TabItem'); 28 | 29 | var _TabItem2 = _interopRequireDefault(_TabItem); 30 | 31 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 32 | 33 | function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } 34 | 35 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 36 | 37 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } 38 | 39 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } 40 | 41 | var Tab = function (_React$Component) { 42 | _inherits(Tab, _React$Component); 43 | 44 | function Tab() { 45 | var _ref; 46 | 47 | var _temp, _this, _ret; 48 | 49 | _classCallCheck(this, Tab); 50 | 51 | for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { 52 | args[_key] = arguments[_key]; 53 | } 54 | 55 | return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Tab.__proto__ || Object.getPrototypeOf(Tab)).call.apply(_ref, [this].concat(args))), _this), _this.setRef = function (ref) { 56 | return _this.node = ref; 57 | }, _temp), _possibleConstructorReturn(_this, _ret); 58 | } 59 | 60 | _createClass(Tab, [{ 61 | key: 'componentDidMount', 62 | value: function componentDidMount() { 63 | this.component = _uikit2.default.tab(this.node); 64 | } 65 | }, { 66 | key: 'componentWillUnmount', 67 | value: function componentWillUnmount() { 68 | this.component.$destroy(); 69 | } 70 | }, { 71 | key: 'render', 72 | value: function render() { 73 | var _props = this.props, 74 | customClassName = _props.className, 75 | bottom = _props.bottom, 76 | rest = _objectWithoutProperties(_props, ['className', 'bottom']); 77 | 78 | var className = (0, _classnames2.default)(customClassName, { 79 | 'uk-tab-bottom': bottom 80 | }); 81 | 82 | return _react2.default.createElement(this.props.component, _extends({ 83 | ref: this.setRef, 84 | className: className 85 | }, rest), this.props.children); 86 | } 87 | }]); 88 | 89 | return Tab; 90 | }(_react2.default.Component); 91 | 92 | // Sub-components 93 | 94 | 95 | Tab.propTypes = { 96 | bottom: _propTypes2.default.bool 97 | }; 98 | Tab.defaultProps = { 99 | component: 'ul', 100 | bottom: false 101 | }; 102 | Tab.Item = _TabItem2.default; 103 | 104 | exports.default = Tab; -------------------------------------------------------------------------------- /lib/components/Tab/TabItem.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | 7 | var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; 8 | 9 | var _react = require('react'); 10 | 11 | var _react2 = _interopRequireDefault(_react); 12 | 13 | var _propTypes = require('prop-types'); 14 | 15 | var _propTypes2 = _interopRequireDefault(_propTypes); 16 | 17 | var _classnames = require('classnames'); 18 | 19 | var _classnames2 = _interopRequireDefault(_classnames); 20 | 21 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 22 | 23 | function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } 24 | 25 | var TabItem = function TabItem(props) { 26 | var customClassName = props.className, 27 | component = props.component, 28 | disabled = props.disabled, 29 | rest = _objectWithoutProperties(props, ['className', 'component', 'disabled']); 30 | 31 | var className = (0, _classnames2.default)(customClassName, { 32 | 'uk-disabled': disabled 33 | }); 34 | 35 | return _react2.default.createElement( 36 | 'li', 37 | { 38 | className: className }, 39 | _react2.default.createElement(component, _extends({}, rest)) 40 | ); 41 | }; 42 | 43 | TabItem.propTypes = { 44 | disabled: _propTypes2.default.bool 45 | }; 46 | 47 | TabItem.defaultProps = { 48 | component: 'a', 49 | disabled: false 50 | }; 51 | 52 | exports.default = TabItem; -------------------------------------------------------------------------------- /lib/components/Tab/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | exports.TabItem = undefined; 7 | 8 | var _Tab = require('./Tab'); 9 | 10 | var _Tab2 = _interopRequireDefault(_Tab); 11 | 12 | var _TabItem2 = require('./TabItem'); 13 | 14 | var _TabItem3 = _interopRequireDefault(_TabItem2); 15 | 16 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 17 | 18 | exports.default = _Tab2.default; 19 | exports.TabItem = _TabItem3.default; -------------------------------------------------------------------------------- /lib/components/Table/Table.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | 7 | var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; 8 | 9 | var _react = require('react'); 10 | 11 | var _react2 = _interopRequireDefault(_react); 12 | 13 | var _propTypes = require('prop-types'); 14 | 15 | var _propTypes2 = _interopRequireDefault(_propTypes); 16 | 17 | var _classnames = require('classnames'); 18 | 19 | var _classnames2 = _interopRequireDefault(_classnames); 20 | 21 | var _TableCaption = require('./TableCaption'); 22 | 23 | var _TableCaption2 = _interopRequireDefault(_TableCaption); 24 | 25 | var _TableHead = require('./TableHead'); 26 | 27 | var _TableHead2 = _interopRequireDefault(_TableHead); 28 | 29 | var _TableBody = require('./TableBody'); 30 | 31 | var _TableBody2 = _interopRequireDefault(_TableBody); 32 | 33 | var _TableFooter = require('./TableFooter'); 34 | 35 | var _TableFooter2 = _interopRequireDefault(_TableFooter); 36 | 37 | var _TableRow = require('./TableRow'); 38 | 39 | var _TableRow2 = _interopRequireDefault(_TableRow); 40 | 41 | var _TableCell = require('./TableCell'); 42 | 43 | var _TableCell2 = _interopRequireDefault(_TableCell); 44 | 45 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 46 | 47 | function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } 48 | 49 | function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } 50 | 51 | var Table = function Table(props) { 52 | var customClassName = props.className, 53 | divider = props.divider, 54 | striped = props.striped, 55 | hover = props.hover, 56 | size = props.size, 57 | rest = _objectWithoutProperties(props, ['className', 'divider', 'striped', 'hover', 'size']); 58 | 59 | var className = (0, _classnames2.default)(customClassName, 'uk-table', _defineProperty({ 60 | 'uk-table-divider': divider, 61 | 'uk-table-striped': striped, 62 | 'uk-table-hover': hover 63 | }, 'uk-table-' + size, size && size !== 'default')); 64 | 65 | return _react2.default.createElement('table', _extends({ 66 | className: className 67 | }, rest)); 68 | }; 69 | 70 | Table.propTypes = { 71 | divider: _propTypes2.default.bool, 72 | striped: _propTypes2.default.bool, 73 | hover: _propTypes2.default.bool, 74 | size: _propTypes2.default.oneOf(['small', 'default', 'large']) 75 | }; 76 | 77 | Table.defaultProps = { 78 | divider: false, 79 | striped: false, 80 | hover: false, 81 | size: 'default' 82 | 83 | // Sub-components 84 | };Table.Caption = _TableCaption2.default; 85 | Table.Head = _TableHead2.default; 86 | Table.Body = _TableBody2.default; 87 | Table.Footer = _TableFooter2.default; 88 | Table.Row = _TableRow2.default; 89 | Table.Cell = _TableCell2.default; 90 | 91 | exports.default = Table; -------------------------------------------------------------------------------- /lib/components/Table/TableBody.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | 7 | var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; 8 | 9 | var _react = require('react'); 10 | 11 | var _react2 = _interopRequireDefault(_react); 12 | 13 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 14 | 15 | function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } 16 | 17 | var TableBody = function TableBody(props) { 18 | var children = props.children, 19 | rest = _objectWithoutProperties(props, ['children']); 20 | 21 | var childrenWithOriginProp = _react2.default.Children.map(children, function (child) { 22 | return _react2.default.cloneElement(child, { origin: 'TableBody' }); 23 | }); 24 | 25 | return _react2.default.createElement('tbody', _extends({ 26 | children: childrenWithOriginProp 27 | }, rest)); 28 | }; 29 | 30 | exports.default = TableBody; -------------------------------------------------------------------------------- /lib/components/Table/TableCaption.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | 7 | var _react = require('react'); 8 | 9 | var _react2 = _interopRequireDefault(_react); 10 | 11 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 12 | 13 | function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } 14 | 15 | var TableCaption = function TableCaption(props) { 16 | var rest = _objectWithoutProperties(props, []); 17 | 18 | return _react2.default.createElement('caption', rest); 19 | }; 20 | 21 | exports.default = TableCaption; -------------------------------------------------------------------------------- /lib/components/Table/TableCell.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | 7 | var _react = require('react'); 8 | 9 | var _react2 = _interopRequireDefault(_react); 10 | 11 | var _propTypes = require('prop-types'); 12 | 13 | var _propTypes2 = _interopRequireDefault(_propTypes); 14 | 15 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 16 | 17 | function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } 18 | 19 | var TableCell = function TableCell(props) { 20 | var origin = props.origin, 21 | rest = _objectWithoutProperties(props, ['origin']); 22 | 23 | if (origin === 'TableHead') return _react2.default.createElement('th', rest); 24 | 25 | return _react2.default.createElement('td', rest); 26 | }; 27 | 28 | TableCell.propTypes = { 29 | origin: _propTypes2.default.string.isRequired 30 | }; 31 | 32 | exports.default = TableCell; -------------------------------------------------------------------------------- /lib/components/Table/TableFooter.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | 7 | var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; 8 | 9 | var _react = require('react'); 10 | 11 | var _react2 = _interopRequireDefault(_react); 12 | 13 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 14 | 15 | function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } 16 | 17 | var TableFooter = function TableFooter(props) { 18 | var children = props.children, 19 | rest = _objectWithoutProperties(props, ['children']); 20 | 21 | var childrenWithOriginProp = _react2.default.Children.map(children, function (child) { 22 | return _react2.default.cloneElement(child, { origin: 'TableFooter' }); 23 | }); 24 | 25 | return _react2.default.createElement('tfoot', _extends({ 26 | children: childrenWithOriginProp 27 | }, rest)); 28 | }; 29 | 30 | exports.default = TableFooter; -------------------------------------------------------------------------------- /lib/components/Table/TableHead.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | 7 | var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; 8 | 9 | var _react = require('react'); 10 | 11 | var _react2 = _interopRequireDefault(_react); 12 | 13 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 14 | 15 | function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } 16 | 17 | var TableHead = function TableHead(props) { 18 | var children = props.children, 19 | rest = _objectWithoutProperties(props, ['children']); 20 | 21 | var childrenWithOriginProp = _react2.default.Children.map(children, function (child) { 22 | return _react2.default.cloneElement(child, { origin: 'TableHead' }); 23 | }); 24 | 25 | return _react2.default.createElement('thead', _extends({ 26 | children: childrenWithOriginProp 27 | }, rest)); 28 | }; 29 | 30 | exports.default = TableHead; -------------------------------------------------------------------------------- /lib/components/Table/TableRow.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | 7 | var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; 8 | 9 | var _react = require('react'); 10 | 11 | var _react2 = _interopRequireDefault(_react); 12 | 13 | var _propTypes = require('prop-types'); 14 | 15 | var _propTypes2 = _interopRequireDefault(_propTypes); 16 | 17 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 18 | 19 | function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } 20 | 21 | var TableRow = function TableRow(props) { 22 | var origin = props.origin, 23 | children = props.children, 24 | rest = _objectWithoutProperties(props, ['origin', 'children']); 25 | 26 | var childrenWithOriginProp = _react2.default.Children.map(children, function (child) { 27 | return _react2.default.cloneElement(child, { origin: origin }); 28 | }); 29 | 30 | return _react2.default.createElement('tr', _extends({ 31 | children: childrenWithOriginProp 32 | }, rest)); 33 | }; 34 | 35 | TableRow.propTypes = { 36 | origin: _propTypes2.default.string.isRequired 37 | }; 38 | 39 | exports.default = TableRow; -------------------------------------------------------------------------------- /lib/components/Table/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | exports.TableCell = exports.TableRow = exports.TableFooter = exports.TableBody = exports.TableHead = exports.TableCaption = undefined; 7 | 8 | var _Table = require('./Table'); 9 | 10 | var _Table2 = _interopRequireDefault(_Table); 11 | 12 | var _TableCaption2 = require('./TableCaption'); 13 | 14 | var _TableCaption3 = _interopRequireDefault(_TableCaption2); 15 | 16 | var _TableHead2 = require('./TableHead'); 17 | 18 | var _TableHead3 = _interopRequireDefault(_TableHead2); 19 | 20 | var _TableBody2 = require('./TableBody'); 21 | 22 | var _TableBody3 = _interopRequireDefault(_TableBody2); 23 | 24 | var _TableFooter2 = require('./TableFooter'); 25 | 26 | var _TableFooter3 = _interopRequireDefault(_TableFooter2); 27 | 28 | var _TableRow2 = require('./TableRow'); 29 | 30 | var _TableRow3 = _interopRequireDefault(_TableRow2); 31 | 32 | var _TableCell2 = require('./TableCell'); 33 | 34 | var _TableCell3 = _interopRequireDefault(_TableCell2); 35 | 36 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 37 | 38 | exports.default = _Table2.default; 39 | exports.TableCaption = _TableCaption3.default; 40 | exports.TableHead = _TableHead3.default; 41 | exports.TableBody = _TableBody3.default; 42 | exports.TableFooter = _TableFooter3.default; 43 | exports.TableRow = _TableRow3.default; 44 | exports.TableCell = _TableCell3.default; -------------------------------------------------------------------------------- /lib/components/Tooltip/Tooltip.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | 7 | var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; 8 | 9 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); 10 | 11 | var _react = require('react'); 12 | 13 | var _react2 = _interopRequireDefault(_react); 14 | 15 | var _reactDom = require('react-dom'); 16 | 17 | var _reactDom2 = _interopRequireDefault(_reactDom); 18 | 19 | var _propTypes = require('prop-types'); 20 | 21 | var _propTypes2 = _interopRequireDefault(_propTypes); 22 | 23 | var _uikit = require('uikit'); 24 | 25 | var _uikit2 = _interopRequireDefault(_uikit); 26 | 27 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 28 | 29 | function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } 30 | 31 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 32 | 33 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } 34 | 35 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } 36 | 37 | var Tooltip = function (_React$Component) { 38 | _inherits(Tooltip, _React$Component); 39 | 40 | function Tooltip() { 41 | _classCallCheck(this, Tooltip); 42 | 43 | return _possibleConstructorReturn(this, (Tooltip.__proto__ || Object.getPrototypeOf(Tooltip)).apply(this, arguments)); 44 | } 45 | 46 | _createClass(Tooltip, [{ 47 | key: 'componentDidMount', 48 | value: function componentDidMount() { 49 | var _props = this.props, 50 | pos = _props.position, 51 | duration = _props.duration, 52 | delay = _props.delay, 53 | animation = _props.animation; 54 | 55 | 56 | var options = _extends({ pos: pos, duration: duration, delay: delay, animation: animation }, this.props.options); 57 | 58 | this.component = _uikit2.default.tooltip(_reactDom2.default.findDOMNode(this), options); 59 | } 60 | }, { 61 | key: 'componentWillUnmount', 62 | value: function componentWillUnmount() { 63 | this.component.$destroy(); 64 | } 65 | }, { 66 | key: 'render', 67 | value: function render() { 68 | var _props2 = this.props, 69 | title = _props2.title, 70 | children = _props2.children, 71 | position = _props2.position, 72 | options = _props2.options, 73 | duration = _props2.duration, 74 | animation = _props2.animation, 75 | rest = _objectWithoutProperties(_props2, ['title', 'children', 'position', 'options', 'duration', 'animation']); 76 | 77 | return _react2.default.cloneElement(children, _extends({ 78 | title: title 79 | }, rest)); 80 | } 81 | }]); 82 | 83 | return Tooltip; 84 | }(_react2.default.Component); 85 | 86 | Tooltip.propTypes = { 87 | title: _propTypes2.default.string.isRequired, 88 | options: _propTypes2.default.object, 89 | children: _propTypes2.default.node.isRequired, 90 | position: _propTypes2.default.oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right']), 91 | duration: _propTypes2.default.number, 92 | delay: _propTypes2.default.number, 93 | animation: _propTypes2.default.string 94 | }; 95 | Tooltip.defaultProps = { 96 | options: {}, 97 | position: 'top', 98 | duration: 100, 99 | animation: 'uk-animation-scale-up' 100 | /*onBeforeShow: f=>f, 101 | onShow: f=>f, 102 | onShown: f=>f, 103 | onBeforeHide: f=>f, 104 | onHide: f=>f, 105 | onHidden: f=>f,*/ 106 | 107 | 108 | /*_events = { 109 | 'beforeshow': () => this.props.onBeforeShow(), 110 | 'show': () => this.props.onShow(), 111 | 'shown': () => this.props.onShown(), 112 | 'beforehide': () => this.props.onBeforeHide(), 113 | 'hide': () => this.props.onHide(), 114 | 'hidden': () => this.props.onHidden(), 115 | }*/ 116 | 117 | }; 118 | exports.default = Tooltip; -------------------------------------------------------------------------------- /lib/components/Tooltip/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | 7 | var _Tooltip = require('./Tooltip'); 8 | 9 | var _Tooltip2 = _interopRequireDefault(_Tooltip); 10 | 11 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 12 | 13 | exports.default = _Tooltip2.default; -------------------------------------------------------------------------------- /netlify.toml: -------------------------------------------------------------------------------- 1 | [Settings] 2 | ID = "react-uikit" 3 | 4 | [build] 5 | publish = ".docz/dist/" 6 | command = "rm -rf .docz && npm run build" 7 | 8 | [[redirects]] 9 | from = "/*" 10 | to = "/index.html" 11 | status = 200 12 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-uikit", 3 | "version": "0.0.8", 4 | "description": "UIkit components for ReactJS", 5 | "repository": "https://github.com/ompmega/react-uikit.git", 6 | "author": "Daniel Ramirez (https://github.com/drmzio)", 7 | "license": "MIT", 8 | "homepage": "https://react-uikit.ompmega.com", 9 | "bugs": "https://github.com/ompmega/react-uikit/issues", 10 | "keywords": [ 11 | "react", 12 | "react-component", 13 | "uikit", 14 | "react-uikit", 15 | "ecosystem-react" 16 | ], 17 | "main": "lib", 18 | "scripts": { 19 | "bundle": "babel ./src --out-dir ./lib", 20 | "dev": "docz dev", 21 | "build": "docz build" 22 | }, 23 | "peerDependencies": { 24 | "react": "^16.0.0", 25 | "react-dom": "^16.0.0", 26 | "uikit": "^3.*" 27 | }, 28 | "dependencies": { 29 | "classnames": "latest", 30 | "lodash": "^4.17.10", 31 | "react-portal": "^4.1.5" 32 | }, 33 | "devDependencies": { 34 | "@svgr/cli": "^2.1.0", 35 | "babel-cli": "^6.26.0", 36 | "babel-core": "^6.26.3", 37 | "babel-eslint": "^8.2.3", 38 | "babel-jest": "^22.4.4", 39 | "babel-loader": "^7.1.4", 40 | "babel-plugin-inline-import": "^2.0.6", 41 | "babel-plugin-react-transform": "^3.0.0", 42 | "babel-plugin-styled-components": "^1.5.1", 43 | "babel-plugin-transform-class-properties": "^6.24.1", 44 | "babel-plugin-transform-decorators-legacy": "^1.3.5", 45 | "babel-polyfill": "^6.26.0", 46 | "babel-preset-es2015": "^6.24.1", 47 | "babel-preset-react": "^6.24.1", 48 | "babel-preset-stage-0": "^6.24.1", 49 | "babel-preset-stage-1": "^6.24.1", 50 | "docz": "^0.5.2", 51 | "docz-core": "^0.5.2", 52 | "docz-plugin-babel6": "latest", 53 | "prop-types": "^15.6.2", 54 | "react": "^16.4.2", 55 | "react-dom": "^16.4.2", 56 | "uikit": "^3.0.0-rc.11" 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /src/components/Alert/Alert.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | import classNames from 'classnames' 4 | import UIkit from 'uikit' 5 | 6 | import AlertClose from './AlertClose' 7 | 8 | class Alert extends React.Component { 9 | 10 | static propTypes = { 11 | closable: PropTypes.bool, 12 | variant: PropTypes.oneOf([ 13 | 'primary', 'success', 'warning', 'danger' 14 | ]), 15 | close: PropTypes.bool, 16 | } 17 | 18 | static defaultProps = { 19 | component: 'div', 20 | closable: false, 21 | onBeforeHide: f=>f, 22 | onHide: f=>f, 23 | close: false, 24 | } 25 | 26 | _events = { 27 | 'beforehide': () => this.props.onBeforeHide(), 28 | 'hide': () => this.props.onHide(), 29 | } 30 | 31 | setRef = (ref) => this.node = ref 32 | 33 | componentDidMount() { 34 | this.component = UIkit.alert(this.node) 35 | 36 | // Bind UIkit events to this component 37 | Object.keys(this._events).map(eventName => { 38 | UIkit.util.on(this.node, eventName, this._events[eventName]) 39 | }) 40 | } 41 | 42 | componentWillUnmount() { 43 | this.component.$destroy() 44 | } 45 | 46 | componentWillReceiveProps(newProps) { 47 | if (newProps.close) 48 | this.component.close() 49 | } 50 | 51 | render() { 52 | const { 53 | className: customClassName, 54 | component, 55 | closable, 56 | children, 57 | variant, 58 | close, 59 | ...rest 60 | } = this.props 61 | 62 | const className = classNames(customClassName, 'uk-alert', { 63 | [`uk-alert-${variant}`]: !!variant 64 | }) 65 | 66 | // Appends close button if `closable` is set. 67 | let childrenNodes = [] 68 | React.Children.forEach(children, child => { 69 | if (typeof child === 'object' && closable) { 70 | if (child.type.displayName !== 'AlertClose') 71 | childrenNodes.push(child) 72 | } else { 73 | childrenNodes.push(child) 74 | } 75 | }) 76 | 77 | if (closable) { 78 | childrenNodes = [ 79 | , 80 | ...childrenNodes 81 | ] 82 | } 83 | 84 | return React.createElement(component, { 85 | ref: this.setRef, 86 | className: className, 87 | ...rest 88 | }, childrenNodes) 89 | } 90 | } 91 | 92 | // Sub-components 93 | Alert.Close = AlertClose 94 | 95 | export default Alert 96 | -------------------------------------------------------------------------------- /src/components/Alert/Alert.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | name: Alert 3 | route: /docs/alert 4 | menu: Components 5 | --- 6 | 7 | import { Playground, PropsTable } from 'docz' 8 | import Alert from './Alert' 9 | 10 | # Alert 11 | ### Display success, warning and error messages. 12 | 13 | | Sub-component | Description | 14 | |-|-| 15 | | `Alert.Close` | Add a close button to your alert. | 16 | 17 | ## Usage 18 | 19 | 20 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 21 | 22 | 23 | 24 | --- 25 | 26 | ## Closable 27 | You may add either the `` component or the `closable` prop to make it closable. 28 | 29 | 30 | 31 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 32 | 33 | 34 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 35 | 36 | 37 | 38 | --- 39 | 40 | ## Style variations 41 | 42 | 43 | 44 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt. 45 | 46 | 47 | 48 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt. 49 | 50 | 51 | 52 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt. 53 | 54 | 55 | 56 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt. 57 | 58 | 59 | 60 | --- 61 | 62 | ## Component props 63 | 64 | ### Alert 65 | 66 | 67 | --- 68 | 69 | ## Events 70 | 71 | ### Alert 72 | | UIkit event | Component event prop | 73 | |-|-| 74 | | beforehide | `onBeforeHide` | 75 | | hide | `onHide` | 76 | -------------------------------------------------------------------------------- /src/components/Alert/AlertClose.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import classNames from 'classnames' 3 | 4 | const AlertClose = (props) => { 5 | const { 6 | className: customClassName, 7 | component, 8 | ...rest 9 | } = props 10 | 11 | const className = classNames(customClassName, 'uk-alert-close') 12 | 13 | return React.createElement(component, { 14 | className: className, 15 | 'data-uk-close': '', 16 | ...rest 17 | }) 18 | } 19 | 20 | AlertClose.defaultProps = { 21 | component: 'a' 22 | } 23 | 24 | export default AlertClose 25 | -------------------------------------------------------------------------------- /src/components/Alert/index.js: -------------------------------------------------------------------------------- 1 | import Alert from './Alert' 2 | export default Alert 3 | 4 | export AlertClose from './AlertClose' 5 | -------------------------------------------------------------------------------- /src/components/Badge/Badge.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import classNames from 'classnames' 3 | 4 | const Badge = (props) => { 5 | const { 6 | className: customClassName, 7 | component, 8 | ...rest 9 | } = props 10 | 11 | const className = classNames(customClassName, 'uk-badge') 12 | 13 | return React.createElement(component, { 14 | className: className, 15 | ...rest 16 | }) 17 | } 18 | 19 | Badge.defaultProps = { 20 | component: 'span' 21 | } 22 | 23 | export default Badge 24 | -------------------------------------------------------------------------------- /src/components/Badge/Badge.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | name: Badge 3 | route: /docs/badge 4 | menu: Components 5 | --- 6 | 7 | import { Playground, PropsTable } from 'docz' 8 | import Badge from './Badge' 9 | 10 | # Badge 11 | ### Easily create nice looking notification badges. 12 | 13 | ## Usage 14 | 15 | 1 16 | 100 17 | 18 | -------------------------------------------------------------------------------- /src/components/Badge/index.js: -------------------------------------------------------------------------------- 1 | import Badge from './Badge' 2 | 3 | export default Badge 4 | -------------------------------------------------------------------------------- /src/components/Breadcrumb/Breadcrumb.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import classNames from 'classnames' 3 | 4 | import BreadcrumbItem from './BreadcrumbItem' 5 | 6 | const Breadcrumb = (props) => { 7 | const { 8 | className: customClassName, 9 | ...rest 10 | } = props 11 | 12 | const className = classNames(customClassName, 'uk-breadcrumb') 13 | 14 | return ( 15 |