orcs-design-system
Version:
TeamForm's Design System, aka: ORCS
125 lines • 6.19 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
const _excluded = ["min", "max", "inverted", "defaultValue", "theme", "ariaLabel"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import React from "react";
import PropTypes from "prop-types";
import styled, { css, ThemeProvider } from "styled-components";
import { space, layout } from "styled-system";
import { themeGet } from "@styled-system/theme-get";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const vars = {
trackHeight: "4px",
thumbDiameter: "20px"
};
const thumb = props => "\n margin-top: -8px;\n box-sizing: border-box;\n border: none;\n width: ".concat(vars.thumbDiameter, ";\n height: ").concat(vars.thumbDiameter, ";\n border-radius: ").concat(vars.thumbDiameter, ";\n background: ").concat(themeGet("colors.primary")(props), ";\n");
const track = props => "\n box-sizing: border-box;\n border: none;\n width: 100%;\n height: ".concat(vars.trackHeight, ";\n\t background: ").concat(themeGet("colors.greyLight")(props), ";\n border-radius: 4px;\n");
const Wrapper = /*#__PURE__*/styled.div.withConfig({
displayName: "Wrapper",
componentId: "sc-zb0zps-0"
})(["", " ", " position:relative;width:100%;display:flex;flex-wrap:wrap;align-items:center;&::before{content:\"", "\";font-size:10px;font-weight:bold;}&::after{content:\"", "\";font-size:10px;font-weight:bold;}", ""], space, layout, props => props.minValue, props => props.maxValue, props => props.inverted ? css(["&::before,&::after{color:", ";}input{&:focus{background:rgba(255,255,255,0.1);}&::-webkit-slider-runnable-track{background:", ";}&::-moz-range-track{background:", ";}&::-ms-track{background:", ";}}output{color:", ";}"], themeGet("colors.white")(props), themeGet("colors.greyDark")(props), themeGet("colors.greyDark")(props), themeGet("colors.greyDark")(props), themeGet("colors.white")(props)) : css([""]));
const Input = /*#__PURE__*/styled.input.attrs({
type: "range"
}).withConfig({
displayName: "Input",
componentId: "sc-zb0zps-1"
})(["flex:1;margin:0;padding:0;width:100%;min-height:", ";background:transparent;cursor:ew-resize;padding:10px 10px;border-radius:25px;transition:", ";&:focus{outline:none;background:rgba(0,0,0,0.05);}&,&::-webkit-slider-thumb{-moz-appearance:none;-webkit-appearance:none;appearance:none;}&::-webkit-slider-runnable-track{", ";}&::-moz-range-track{", ";}&::-ms-track{", ";}&::-webkit-slider-thumb{", ";}&::-moz-range-thumb{", ";}&::-ms-thumb{", ";}&::-ms-tooltip{display:none;}"], vars.thumbDiameter, props => themeGet("transition.transitionDefault")(props), track, track, track, thumb, thumb, thumb);
const Output = /*#__PURE__*/styled.output.withConfig({
displayName: "Output",
componentId: "sc-zb0zps-2"
})(["display:block;user-select:none;font-weight:bold;text-align:center;font-size:14px;pointer-events:none;text-align:center;flex:1 1 100%;order:4;color:", ";"], props => themeGet("colors.greyDarker")(props));
/**
* Range component is pretty self explanatory, used to select a number out of a range, make sure to set a min, max and default value.
*/
export default function Range(_ref) {
let {
min,
max,
inverted,
defaultValue,
theme,
ariaLabel
} = _ref,
props = _objectWithoutProperties(_ref, _excluded);
const component = /*#__PURE__*/_jsxs(Wrapper, {
minValue: min,
maxValue: max,
inverted: inverted,
children: [/*#__PURE__*/_jsx(Input, _objectSpread({
min: min,
max: max,
"aria-label": ariaLabel
}, props)), /*#__PURE__*/_jsx(Output, {
"aria-hidden": "true",
children: defaultValue
})]
});
return theme ? /*#__PURE__*/_jsx(ThemeProvider, {
theme: theme,
children: component
}) : component;
}
Range.propTypes = {
/** Sets the minimum value for the range */
min: PropTypes.number,
/** Sets the maximum value for the range */
max: PropTypes.number,
/** Sets the default value for the range */
defaultValue: PropTypes.number,
/** Sets the aria-label for accessibility */
ariaLabel: PropTypes.string.isRequired,
/** Changes appearance to suit dark backgrounds */
inverted: PropTypes.bool,
/** Specifies the system design theme. */
theme: PropTypes.object
};
Range.__docgenInfo = {
"description": "Range component is pretty self explanatory, used to select a number out of a range, make sure to set a min, max and default value.",
"methods": [],
"displayName": "Range",
"props": {
"min": {
"description": "Sets the minimum value for the range",
"type": {
"name": "number"
},
"required": false
},
"max": {
"description": "Sets the maximum value for the range",
"type": {
"name": "number"
},
"required": false
},
"defaultValue": {
"description": "Sets the default value for the range",
"type": {
"name": "number"
},
"required": false
},
"ariaLabel": {
"description": "Sets the aria-label for accessibility",
"type": {
"name": "string"
},
"required": true
},
"inverted": {
"description": "Changes appearance to suit dark backgrounds",
"type": {
"name": "bool"
},
"required": false
},
"theme": {
"description": "Specifies the system design theme.",
"type": {
"name": "object"
},
"required": false
}
}
};