mirror of
https://github.com/yldio/copilot.git
synced 2024-11-11 05:40:11 +02:00
convert tab/tabs
This commit is contained in:
parent
18978abf08
commit
ccb53f3783
@ -1,19 +1,32 @@
|
||||
const classNames = require('classnames');
|
||||
const React = require('react');
|
||||
const styles = require('./style.css');
|
||||
const fns = require('../../shared/functions');
|
||||
const Styled = require('styled-components');
|
||||
|
||||
const {
|
||||
rndId
|
||||
} = fns;
|
||||
|
||||
const {
|
||||
default: styled
|
||||
} = Styled;
|
||||
|
||||
const StyledTabs = styled.div`
|
||||
font-size: 0;
|
||||
|
||||
&::after {
|
||||
clear: both;
|
||||
content: "";
|
||||
display: table;
|
||||
}
|
||||
`;
|
||||
|
||||
const Tabs = ({
|
||||
className,
|
||||
children, // array of <Tab>
|
||||
id,
|
||||
id = rndId(),
|
||||
name = '',
|
||||
style
|
||||
}) => {
|
||||
const cn = classNames(
|
||||
className,
|
||||
styles.tabs
|
||||
);
|
||||
|
||||
const _children = React.Children.map(children, (child, i) => {
|
||||
return React.cloneElement(child, {
|
||||
defaultChecked: i === 0,
|
||||
@ -22,14 +35,14 @@ const Tabs = ({
|
||||
});
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn}
|
||||
<StyledTabs
|
||||
className={className}
|
||||
id={id}
|
||||
role='tablist'
|
||||
style={style}
|
||||
>
|
||||
{_children}
|
||||
</div>
|
||||
</StyledTabs>
|
||||
);
|
||||
};
|
||||
|
||||
|
@ -1,46 +1,130 @@
|
||||
const composers = require('../../../shared/composers');
|
||||
const constants = require('../../../shared/constants');
|
||||
const fns = require('../../../shared/functions');
|
||||
const paramCase = require('param-case');
|
||||
const classNames = require('classnames');
|
||||
const React = require('react');
|
||||
const styles = require('./style.css');
|
||||
const Styled = require('styled-components');
|
||||
|
||||
const {
|
||||
moveZ
|
||||
} = composers;
|
||||
|
||||
const {
|
||||
boxes,
|
||||
colors
|
||||
} = constants;
|
||||
|
||||
const {
|
||||
remcalc,
|
||||
rndId
|
||||
} = fns;
|
||||
|
||||
const {
|
||||
default: styled
|
||||
} = Styled;
|
||||
|
||||
const classNames = {
|
||||
label: rndId(),
|
||||
panel: rndId()
|
||||
};
|
||||
|
||||
const StyledTab = styled.div`
|
||||
display: inline;
|
||||
`;
|
||||
|
||||
const StyledRadio = styled.input`
|
||||
clip: rect(0 0 0 0);
|
||||
height: 1px;
|
||||
opacity: 0;
|
||||
width: 1px;
|
||||
|
||||
${moveZ({
|
||||
position: 'fixed',
|
||||
amount: -1
|
||||
})}
|
||||
|
||||
&:checked {
|
||||
& + .${classNames.label} {
|
||||
background: #FAFAFA;
|
||||
border-bottom-width: 0;
|
||||
padding-bottom: ${remcalc(11)};
|
||||
|
||||
${moveZ({
|
||||
amount: 1
|
||||
})}
|
||||
}
|
||||
|
||||
& ~ .${classNames.panel} {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledLabel = styled.label`
|
||||
background: #F2F2F2;
|
||||
border: ${boxes.border.unchecked};
|
||||
color: #646464;
|
||||
display: inline-block;
|
||||
font-size: ${remcalc(20)};
|
||||
left: 1px;
|
||||
margin-left: -1px;
|
||||
padding: ${remcalc(10)};
|
||||
position: relative;
|
||||
vertical-align: bottom;
|
||||
`;
|
||||
|
||||
const StyledPanel = styled.div`
|
||||
display: inline-block;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
width: 0;
|
||||
`;
|
||||
|
||||
const StyledContent = styled.div`
|
||||
background: #FAFAFA;
|
||||
border: ${boxes.border.unchecked};
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
float: left;
|
||||
font-size: ${remcalc(16)};
|
||||
margin-top: ${remcalc(-1)};
|
||||
padding: ${remcalc('0 20')};
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
const Tab = ({
|
||||
className,
|
||||
children,
|
||||
checked,
|
||||
defaultChecked = true,
|
||||
defaultChecked = false,
|
||||
disabled = false,
|
||||
id,
|
||||
name,
|
||||
title = '',
|
||||
style
|
||||
}) => {
|
||||
const cn = classNames(
|
||||
className,
|
||||
styles.tab
|
||||
);
|
||||
|
||||
const tabId = paramCase(title);
|
||||
|
||||
return (
|
||||
<div className={cn}>
|
||||
<input
|
||||
<StyledTab className={className}>
|
||||
<StyledRadio
|
||||
checked={checked}
|
||||
className={styles.radio_input}
|
||||
defaultChecked={defaultChecked}
|
||||
disabled={disabled}
|
||||
id={tabId}
|
||||
name={name}
|
||||
type='radio'
|
||||
/>
|
||||
<label className={styles.label} htmlFor={tabId}>
|
||||
<StyledLabel className={classNames.label} htmlFor={tabId}>
|
||||
{title}
|
||||
</label>
|
||||
<div className={styles.panel}>
|
||||
<div className={styles.content}>
|
||||
</StyledLabel>
|
||||
<StyledPanel className={classNames.panel}>
|
||||
<StyledContent>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</StyledContent>
|
||||
</StyledPanel>
|
||||
</StyledTab>
|
||||
);
|
||||
};
|
||||
|
||||
|
@ -7,8 +7,8 @@ module.exports = {
|
||||
Column: require('./components/column'),
|
||||
Container: require('./components/container'),
|
||||
Row: require('./components/row'),
|
||||
// Tab: require('./components/tabs/tab'),
|
||||
// Tabs: require('./components/tabs'),
|
||||
Tab: require('./components/tabs/tab'),
|
||||
Tabs: require('./components/tabs'),
|
||||
Toggle: require('./components/toggle'),
|
||||
// Notificaton: require('./components/notification'),
|
||||
// Input: require('./components/input'),
|
||||
|
@ -1,12 +1,17 @@
|
||||
const constants = require('./constants');
|
||||
const Styled = require('styled-components');
|
||||
|
||||
const {
|
||||
boxes
|
||||
} = constants;
|
||||
|
||||
const {
|
||||
css
|
||||
} = Styled;
|
||||
|
||||
module.exports = {
|
||||
verticallyAlignCenter: css`
|
||||
/* Need to palce position:relative on parent */
|
||||
/* Need to place position:relative on parent */
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
@ -16,5 +21,21 @@ module.exports = {
|
||||
display: block;
|
||||
content: "";
|
||||
clear: both;
|
||||
`,
|
||||
moveZ: ({
|
||||
amount = 0,
|
||||
position = 'relative'
|
||||
}) => css`
|
||||
position: ${position};
|
||||
z-index: ${amount};
|
||||
`,
|
||||
baseBox: ({
|
||||
radius = boxes.borderRadius,
|
||||
border = boxes.border.unchecked,
|
||||
shadow = boxes.bottomShaddow
|
||||
}) => css`
|
||||
border: ${border};
|
||||
border-radius: ${radius};
|
||||
box-shadow: ${shadow};
|
||||
`
|
||||
};
|
||||
|
@ -13,6 +13,8 @@ const {
|
||||
Row,
|
||||
Column,
|
||||
Avatar,
|
||||
Tabs,
|
||||
Tab,
|
||||
Toggle,
|
||||
Widget
|
||||
} = require('../src/');
|
||||
@ -126,6 +128,18 @@ storiesOf('Checkbox', module)
|
||||
<Checkbox disabled />
|
||||
));
|
||||
|
||||
storiesOf('Tabs', module)
|
||||
.add('Default', () => (
|
||||
<Tabs name='my-tab-group'>
|
||||
<Tab title='Containers'>
|
||||
<h1>Containers</h1>
|
||||
</Tab>
|
||||
<Tab title='Users'>
|
||||
<h1>User</h1>
|
||||
</Tab>
|
||||
</Tabs>
|
||||
))
|
||||
|
||||
storiesOf('Toggle', module)
|
||||
.add('checked', () => (
|
||||
<Toggle checked />
|
||||
|
103
ui/yarn.lock
103
ui/yarn.lock
@ -1551,6 +1551,10 @@ circular-json@^0.3.0:
|
||||
version "0.3.1"
|
||||
resolved "https://registry.yarnpkg.com/circular-json/-/circular-json-0.3.1.tgz#be8b36aefccde8b3ca7aa2d6afc07a37242c0d2d"
|
||||
|
||||
clamp@^1.0.1:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/clamp/-/clamp-1.0.1.tgz#66a0e64011816e37196828fdc8c8c147312c8634"
|
||||
|
||||
clap@^1.0.9:
|
||||
version "1.1.2"
|
||||
resolved "https://registry.yarnpkg.com/clap/-/clap-1.1.2.tgz#316545bf22229225a2cecaa6824cd2f56a9709ed"
|
||||
@ -1806,13 +1810,6 @@ create-error-class@^3.0.1:
|
||||
dependencies:
|
||||
capture-stack-trace "^1.0.0"
|
||||
|
||||
cross-spawn-async@^2.0.0:
|
||||
version "2.2.5"
|
||||
resolved "https://registry.yarnpkg.com/cross-spawn-async/-/cross-spawn-async-2.2.5.tgz#845ff0c0834a3ded9d160daca6d390906bb288cc"
|
||||
dependencies:
|
||||
lru-cache "^4.0.0"
|
||||
which "^1.2.8"
|
||||
|
||||
cross-spawn@^4, cross-spawn@^4.0.0:
|
||||
version "4.0.2"
|
||||
resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-4.0.2.tgz#7b9247621c23adfdd3856004a823cbe397424d41"
|
||||
@ -1820,12 +1817,13 @@ cross-spawn@^4, cross-spawn@^4.0.0:
|
||||
lru-cache "^4.0.1"
|
||||
which "^1.2.9"
|
||||
|
||||
cross-spawn@2.0.x:
|
||||
version "2.0.1"
|
||||
resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-2.0.1.tgz#ab6fd893a099759d9b85220e3a64397de946b0f6"
|
||||
cross-spawn@^5.0.1:
|
||||
version "5.0.1"
|
||||
resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-5.0.1.tgz#a3bbb302db2297cbea3c04edf36941f4613aa399"
|
||||
dependencies:
|
||||
cross-spawn-async "^2.0.0"
|
||||
spawn-sync "1.0.13"
|
||||
lru-cache "^4.0.1"
|
||||
shebang-command "^1.2.0"
|
||||
which "^1.2.9"
|
||||
|
||||
cryptiles@2.x.x:
|
||||
version "2.0.5"
|
||||
@ -1907,8 +1905,8 @@ cssesc@^0.1.0:
|
||||
resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-0.1.0.tgz#c814903e45623371a0477b40109aaafbeeaddbb4"
|
||||
|
||||
"cssnano@>=2.6.1 <4":
|
||||
version "3.8.1"
|
||||
resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-3.8.1.tgz#008a482148ee948cf0af2ee6e44bd97c53f886ec"
|
||||
version "3.8.2"
|
||||
resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-3.8.2.tgz#318551275d965956876847c16534e0ffe37bb5e6"
|
||||
dependencies:
|
||||
autoprefixer "^6.3.1"
|
||||
decamelize "^1.1.2"
|
||||
@ -3183,6 +3181,10 @@ is-my-json-valid@^2.10.0, is-my-json-valid@^2.12.4:
|
||||
jsonpointer "^4.0.0"
|
||||
xtend "^4.0.0"
|
||||
|
||||
is-nil@^1.0.0:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/is-nil/-/is-nil-1.0.1.tgz#2daba29e0b585063875e7b539d071f5b15937969"
|
||||
|
||||
is-npm@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/is-npm/-/is-npm-1.0.0.tgz#f2fb63a65e4905b406c86072765a1a4dc793b9f4"
|
||||
@ -3197,6 +3199,10 @@ is-obj@^1.0.0:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-1.0.1.tgz#3e4729ac1f5fde025cd7d83a896dab9f4f67db0f"
|
||||
|
||||
is-object@^1.0.1:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/is-object/-/is-object-1.0.1.tgz#8952688c5ec2ffd6b03ecc85e769e02903083470"
|
||||
|
||||
is-observable@^0.2.0:
|
||||
version "0.2.0"
|
||||
resolved "https://registry.yarnpkg.com/is-observable/-/is-observable-0.2.0.tgz#b361311d83c6e5d726cabf5e250b0237106f5ae2"
|
||||
@ -3639,10 +3645,6 @@ lodash.isarray@^3.0.0:
|
||||
version "3.0.4"
|
||||
resolved "https://registry.yarnpkg.com/lodash.isarray/-/lodash.isarray-3.0.4.tgz#79e4eb88c36a8122af86f844aa9bcd851b5fbb55"
|
||||
|
||||
lodash.isarray@^4.0.0:
|
||||
version "4.0.0"
|
||||
resolved "https://registry.yarnpkg.com/lodash.isarray/-/lodash.isarray-4.0.0.tgz#2aca496b28c4ca6d726715313590c02e6ea34403"
|
||||
|
||||
lodash.isequal@^4.4.0:
|
||||
version "4.4.0"
|
||||
resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.4.0.tgz#6295768e98e14dc15ce8d362ef6340db82852031"
|
||||
@ -3773,6 +3775,10 @@ math-expression-evaluator@^1.2.14:
|
||||
dependencies:
|
||||
lodash.indexof "^4.0.5"
|
||||
|
||||
max-safe-int@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/max-safe-int/-/max-safe-int-1.0.0.tgz#44fba8ec993ded91fb2c5a35e71cf9c9f369ce52"
|
||||
|
||||
max-timeout@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/max-timeout/-/max-timeout-1.0.0.tgz#b68f69a2f99e0b476fd4cb23e2059ca750715e1f"
|
||||
@ -3899,8 +3905,8 @@ mkdirp@^0.5.0, mkdirp@^0.5.1, "mkdirp@>=0.5 0", mkdirp@~0.5.0, mkdirp@~0.5.1:
|
||||
minimist "0.0.8"
|
||||
|
||||
mobx@^2.3.4:
|
||||
version "2.6.5"
|
||||
resolved "https://registry.yarnpkg.com/mobx/-/mobx-2.6.5.tgz#9ea2a7f049c886b943981ea491bfcfba301dec49"
|
||||
version "2.7.0"
|
||||
resolved "https://registry.yarnpkg.com/mobx/-/mobx-2.7.0.tgz#cf3d82d18c0ca7f458d8f2a240817b3dc7e54a01"
|
||||
|
||||
ms@^0.7.1, ms@0.7.2:
|
||||
version "0.7.2"
|
||||
@ -4724,10 +4730,11 @@ power-assert-util-string-width@^1.1.1:
|
||||
eastasianwidth "^0.1.1"
|
||||
|
||||
pre-commit@^1.1.3:
|
||||
version "1.1.3"
|
||||
resolved "https://registry.yarnpkg.com/pre-commit/-/pre-commit-1.1.3.tgz#6d5ed90740472072958c711a15f676aa2c231377"
|
||||
version "1.2.0"
|
||||
resolved "https://registry.yarnpkg.com/pre-commit/-/pre-commit-1.2.0.tgz#16a1a218861c778d1a1498719c9763717913d5b8"
|
||||
dependencies:
|
||||
cross-spawn "2.0.x"
|
||||
cross-spawn "^5.0.1"
|
||||
spawn-sync "^1.0.15"
|
||||
which "1.2.x"
|
||||
|
||||
prelude-ls@~1.1.2:
|
||||
@ -4839,6 +4846,21 @@ randexp@^0.4.2:
|
||||
discontinuous-range "1.0.0"
|
||||
ret "~0.1.10"
|
||||
|
||||
random-integral@^1.0.3:
|
||||
version "1.0.3"
|
||||
resolved "https://registry.yarnpkg.com/random-integral/-/random-integral-1.0.3.tgz#8ff3c117565c9a04b66ddd559f3aed29bd0f0f6c"
|
||||
dependencies:
|
||||
clamp "^1.0.1"
|
||||
max-safe-int "^1.0.0"
|
||||
to-integer "^1.0.1"
|
||||
|
||||
random-natural@^1.0.3:
|
||||
version "1.0.3"
|
||||
resolved "https://registry.yarnpkg.com/random-natural/-/random-natural-1.0.3.tgz#ef28615b03c2cb71aaebf7f24f487266a443c5c0"
|
||||
dependencies:
|
||||
max-safe-int "^1.0.0"
|
||||
random-integral "^1.0.3"
|
||||
|
||||
randomatic@^1.1.3:
|
||||
version "1.1.6"
|
||||
resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-1.1.6.tgz#110dcabff397e9dcff7c0789ccc0a49adf1ec5bb"
|
||||
@ -5334,6 +5356,16 @@ shallowequal@^0.2.2, shallowequal@0.2.x:
|
||||
dependencies:
|
||||
lodash.keys "^3.1.2"
|
||||
|
||||
shebang-command@^1.2.0:
|
||||
version "1.2.0"
|
||||
resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
|
||||
dependencies:
|
||||
shebang-regex "^1.0.0"
|
||||
|
||||
shebang-regex@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-1.0.0.tgz#da42f49740c0b42db2ca9728571cb190c98efea3"
|
||||
|
||||
shelljs@^0.7.4, shelljs@^0.7.5:
|
||||
version "0.7.5"
|
||||
resolved "https://registry.yarnpkg.com/shelljs/-/shelljs-0.7.5.tgz#2eef7a50a21e1ccf37da00df767ec69e30ad0675"
|
||||
@ -5400,9 +5432,9 @@ source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6, source-map@~0.5.0, sour
|
||||
version "0.5.6"
|
||||
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412"
|
||||
|
||||
spawn-sync@1.0.13:
|
||||
version "1.0.13"
|
||||
resolved "https://registry.yarnpkg.com/spawn-sync/-/spawn-sync-1.0.13.tgz#904091b9ad48a0f3afb0e84752154c01e82fd8d8"
|
||||
spawn-sync@^1.0.15:
|
||||
version "1.0.15"
|
||||
resolved "https://registry.yarnpkg.com/spawn-sync/-/spawn-sync-1.0.15.tgz#b00799557eb7fb0c8376c29d44e8a1ea67e57476"
|
||||
dependencies:
|
||||
concat-stream "^1.4.7"
|
||||
os-shim "^0.1.2"
|
||||
@ -5739,6 +5771,15 @@ to-fast-properties@^1.0.1:
|
||||
version "1.0.2"
|
||||
resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.2.tgz#f3f5c0c3ba7299a7ef99427e44633257ade43320"
|
||||
|
||||
to-integer@^1.0.1:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/to-integer/-/to-integer-1.0.1.tgz#511ad41dce6a93730a8f3b6e35a164fd829464da"
|
||||
dependencies:
|
||||
is-function "^1.0.1"
|
||||
is-nil "^1.0.0"
|
||||
is-object "^1.0.1"
|
||||
is-symbol "^1.0.1"
|
||||
|
||||
tough-cookie@~2.3.0:
|
||||
version "2.3.2"
|
||||
resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.3.2.tgz#f081f76e4c85720e6c37a5faced737150d84072a"
|
||||
@ -5910,14 +5951,14 @@ utils-merge@1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.0.tgz#0294fb922bb9375153541c4f7096231f287c8af8"
|
||||
|
||||
uuid, uuid@^3.0.0:
|
||||
version "3.0.1"
|
||||
resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.0.1.tgz#6544bba2dfda8c1cf17e629a3a305e2bb1fee6c1"
|
||||
|
||||
uuid@^2.0.1, uuid@^2.0.3:
|
||||
version "2.0.3"
|
||||
resolved "https://registry.yarnpkg.com/uuid/-/uuid-2.0.3.tgz#67e2e863797215530dff318e5bf9dcebfd47b21a"
|
||||
|
||||
uuid@^3.0.0:
|
||||
version "3.0.1"
|
||||
resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.0.1.tgz#6544bba2dfda8c1cf17e629a3a305e2bb1fee6c1"
|
||||
|
||||
v8flags@^2.0.10:
|
||||
version "2.0.11"
|
||||
resolved "https://registry.yarnpkg.com/v8flags/-/v8flags-2.0.11.tgz#bca8f30f0d6d60612cc2c00641e6962d42ae6881"
|
||||
@ -6016,7 +6057,7 @@ which-module@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/which-module/-/which-module-1.0.0.tgz#bba63ca861948994ff307736089e3b96026c2a4f"
|
||||
|
||||
which@^1.2.4, which@^1.2.8, which@^1.2.9, which@1.2.x:
|
||||
which@^1.2.4, which@^1.2.9, which@1.2.x:
|
||||
version "1.2.12"
|
||||
resolved "https://registry.yarnpkg.com/which/-/which-1.2.12.tgz#de67b5e450269f194909ef23ece4ebe416fa1192"
|
||||
dependencies:
|
||||
|
Loading…
Reference in New Issue
Block a user