fk-react-ui-components
Version:
Step 1 : Create a file in [ Seeds / Plants / Trees ] <br> Step 2 : It should export an Object with component name and story Component [Refer other components] <br> Step 3 : Story Component should return a react component <br> Step 3 : Created file should
113 lines (91 loc) • 6.38 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Separator = exports.InputWrapper = exports.Handle = exports.Tooltip = exports.Mark = exports.Line = exports.Scale = exports.SliderWrapper = undefined;
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; };
var _templateObject = _taggedTemplateLiteral(['\n position: relative;\n width: ', ';\n height: ', ';\n cursor: pointer;\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n'], ['\n position: relative;\n width: ', ';\n height: ', ';\n cursor: pointer;\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n']),
_templateObject2 = _taggedTemplateLiteral(['\n position: relative;\n flex-basis: 100%;\n height: 2px;\n background-color: ', ';\n border-radius: 1px;\n'], ['\n position: relative;\n flex-basis: 100%;\n height: 2px;\n background-color: ', ';\n border-radius: 1px;\n']),
_templateObject3 = _taggedTemplateLiteral(['\n position: absolute;\n height: 100%;\n background-color: ', ';\n'], ['\n position: absolute;\n height: 100%;\n background-color: ', ';\n']),
_templateObject4 = _taggedTemplateLiteral(['\n position: absolute;\n left: ', 'px;\n height: ', ';\n transform: translateY(-3px);\n width: 2px;\n background-color: ', ';\n'], ['\n position: absolute;\n left: ', 'px;\n height: ', ';\n transform: translateY(-3px);\n width: 2px;\n background-color: ', ';\n']),
_templateObject5 = _taggedTemplateLiteral(['\n position: absolute;\n left: ', 'px;\n transform: translateY(8px);\n font-size: ', ';\n color: ', ';\n user-select: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n\n &:nth-last-child(2) {\n left: auto;\n right: -5px;\n }\n'], ['\n position: absolute;\n left: ', 'px;\n transform: translateY(8px);\n font-size: ', ';\n color: ', ';\n user-select: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n\n &:nth-last-child(2) {\n left: auto;\n right: -5px;\n }\n']),
_templateObject6 = _taggedTemplateLiteral(['\n position: absolute;\n left: ', 'px;\n height: ', 'px;\n width: ', 'px;\n background-color: ', ';\n border-radius: 50%;\n &:hover {\n height: ', 'px;\n width: ', 'px;\n }\n'], ['\n position: absolute;\n left: ', 'px;\n height: ', 'px;\n width: ', 'px;\n background-color: ', ';\n border-radius: 50%;\n &:hover {\n height: ', 'px;\n width: ', 'px;\n }\n']),
_templateObject7 = _taggedTemplateLiteral(['\n display: flex;\n align-items: center;\n margin-top: 20px;\n'], ['\n display: flex;\n align-items: center;\n margin-top: 20px;\n']),
_templateObject8 = _taggedTemplateLiteral(['\n margin: 0 10px;\n'], ['\n margin: 0 10px;\n']);
var _styledComponents = require('styled-components');
var _styledComponents2 = _interopRequireDefault(_styledComponents);
var _colorCodes = require('../../colorCodes');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
var defaultProps = {
theme: _extends({}, _colorCodes.guidelineColors)
};
var SliderWrapper = exports.SliderWrapper = _styledComponents2.default.div(_templateObject, function (_ref) {
var styles = _ref.styles;
return styles.width || '160px';
}, function (_ref2) {
var styles = _ref2.styles;
return styles.height || '50px';
});
var Scale = exports.Scale = _styledComponents2.default.div(_templateObject2, function (_ref3) {
var styles = _ref3.styles,
theme = _ref3.theme;
return styles.backgroundColor || theme.border.primary;
});
Scale.defaultProps = defaultProps;
var Line = exports.Line = _styledComponents2.default.div(_templateObject3, function (_ref4) {
var styles = _ref4.styles,
theme = _ref4.theme;
return styles.backgroundColor || theme.accent.primary;
});
Line.defaultProps = defaultProps;
var Mark = exports.Mark = _styledComponents2.default.div(_templateObject4, function (_ref5) {
var posX = _ref5.posX;
return posX - 1;
}, function (_ref6) {
var styles = _ref6.styles;
return styles.height || '8px';
}, function (_ref7) {
var styles = _ref7.styles,
theme = _ref7.theme;
return styles.backgroundColor || theme.border.primary;
});
Mark.defaultProps = defaultProps;
var Tooltip = exports.Tooltip = _styledComponents2.default.div(_templateObject5, function (_ref8) {
var posX = _ref8.posX;
return posX - 5;
}, function (_ref9) {
var styles = _ref9.styles;
return styles.fontSize || '12px';
}, function (_ref10) {
var styles = _ref10.styles,
theme = _ref10.theme;
return styles.color || theme.black;
});
Tooltip.defaultProps = defaultProps;
var Handle = exports.Handle = _styledComponents2.default.div(_templateObject6, function (_ref11) {
var posX = _ref11.posX,
styles = _ref11.styles;
return posX - (styles.radius || 5);
}, function (_ref12) {
var styles = _ref12.styles,
active = _ref12.active;
return active ? 2 * (styles.activeRadius || 6) : 2 * (styles.radius || 5);
}, function (_ref13) {
var styles = _ref13.styles,
active = _ref13.active;
return active ? 2 * (styles.activeRadius || 6) : 2 * (styles.radius || 5);
}, function (_ref14) {
var styles = _ref14.styles,
theme = _ref14.theme;
return styles.backgroundColor || theme.accent.primary;
}, function (_ref15) {
var styles = _ref15.styles;
return 2 * (styles.activeRadius || 6);
}, function (_ref16) {
var styles = _ref16.styles;
return 2 * (styles.activeRadius || 6);
});
Handle.defaultProps = defaultProps;
var InputWrapper = exports.InputWrapper = _styledComponents2.default.div(_templateObject7);
var Separator = exports.Separator = _styledComponents2.default.span(_templateObject8);