mirror of
https://github.com/yldio/copilot.git
synced 2024-11-10 21:30:06 +02:00
implement and
This commit is contained in:
parent
df4c3d05e1
commit
e91c28ad81
@ -14,6 +14,7 @@
|
||||
"dependencies": {
|
||||
"classnames": "^2.2.5",
|
||||
"lodash.flatten": "^4.4.0",
|
||||
"param-case": "^2.1.0",
|
||||
"react": "^15.3.2",
|
||||
"react-a11y": "^0.3.3"
|
||||
},
|
||||
|
57
ui/src/components/tab/index.js
Normal file
57
ui/src/components/tab/index.js
Normal file
@ -0,0 +1,57 @@
|
||||
const paramCase = require('param-case');
|
||||
const classNames = require('classnames');
|
||||
const React = require('react');
|
||||
const styles = require('./style.css');
|
||||
|
||||
const Tab = ({
|
||||
className,
|
||||
children,
|
||||
checked,
|
||||
defaultChecked = true,
|
||||
disabled = false,
|
||||
id,
|
||||
name,
|
||||
title = '',
|
||||
style
|
||||
}) => {
|
||||
const cn = classNames(
|
||||
className,
|
||||
styles.tab
|
||||
);
|
||||
|
||||
const tabId = paramCase(title);
|
||||
|
||||
return (
|
||||
<div className={cn}>
|
||||
<input
|
||||
checked={checked}
|
||||
className={styles.input}
|
||||
defaultChecked={defaultChecked}
|
||||
disabled={disabled}
|
||||
id={tabId}
|
||||
name={name}
|
||||
type='radio'
|
||||
/>
|
||||
<label className={styles.label} htmlFor={tabId}>
|
||||
{title}
|
||||
</label>
|
||||
<div className={styles.content}>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Tab.propTypes = {
|
||||
checked: React.PropTypes.bool,
|
||||
children: React.PropTypes.node,
|
||||
className: React.PropTypes.string,
|
||||
defaultChecked: React.PropTypes.bool,
|
||||
disabled: React.PropTypes.bool,
|
||||
id: React.PropTypes.string,
|
||||
name: React.PropTypes.string,
|
||||
style: React.PropTypes.object,
|
||||
title: React.PropTypes.string
|
||||
};
|
||||
|
||||
module.exports = Tab;
|
32
ui/src/components/tab/readme.md
Normal file
32
ui/src/components/tab/readme.md
Normal file
@ -0,0 +1,32 @@
|
||||
# `<Tab>`
|
||||
|
||||
## demo
|
||||
|
||||
```embed
|
||||
const React = require('react');
|
||||
const ReactDOM = require('react-dom/server');
|
||||
const Base = require('../base');
|
||||
const Container = require('../container');
|
||||
const Row = require('../row');
|
||||
const Column = require('../column');
|
||||
const Tabs = require('../tabs');
|
||||
const Tab = require('./index');
|
||||
const styles = require('./style.css');
|
||||
|
||||
nmodule.exports = ReactDOM.renderToString(
|
||||
<Base>
|
||||
<Row>
|
||||
<Column xs={12}>
|
||||
<Tabs name='my-tab-group'>
|
||||
<Tab title='Containers'>
|
||||
<h1>Containers</h1>
|
||||
</Tab>
|
||||
<Tab title='Users'>
|
||||
<h1>User</h1>
|
||||
</Tab>
|
||||
</Tabs>
|
||||
</Column>
|
||||
</Row>
|
||||
</Base>
|
||||
);
|
||||
```
|
38
ui/src/components/tab/style.css
Normal file
38
ui/src/components/tab/style.css
Normal file
@ -0,0 +1,38 @@
|
||||
.tab {
|
||||
float: left;
|
||||
|
||||
& .label {
|
||||
background: #eee;
|
||||
padding: 10px;
|
||||
border: 1px solid #ccc;
|
||||
margin-left: -1px;
|
||||
position: relative;
|
||||
left: 1px;
|
||||
}
|
||||
|
||||
& .input[type=radio] {
|
||||
visibility: hidden;
|
||||
display: none;
|
||||
}
|
||||
|
||||
& .content {
|
||||
position: absolute;
|
||||
top: 28px;
|
||||
left: 0;
|
||||
background: white;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: 20px;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
& .input[type=radio]:checked ~ .label {
|
||||
background: white;
|
||||
border-bottom: 1px solid white;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
& .input[type=radio]:checked ~ .label ~ .content {
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
44
ui/src/components/tabs/index.js
Normal file
44
ui/src/components/tabs/index.js
Normal file
@ -0,0 +1,44 @@
|
||||
const classNames = require('classnames');
|
||||
const React = require('react');
|
||||
const styles = require('./style.css');
|
||||
|
||||
const Tabs = ({
|
||||
className,
|
||||
children, // array of <Tab>
|
||||
id,
|
||||
name = '',
|
||||
style
|
||||
}) => {
|
||||
const cn = classNames(
|
||||
className,
|
||||
styles.tabs
|
||||
);
|
||||
|
||||
const _children = React.Children.map(children, (child, i) => {
|
||||
return React.cloneElement(child, {
|
||||
defaultChecked: i === 0,
|
||||
name
|
||||
});
|
||||
});
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn}
|
||||
id={id}
|
||||
role='tablist'
|
||||
style={style}
|
||||
>
|
||||
{_children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Tabs.propTypes = {
|
||||
children: React.PropTypes.node,
|
||||
className: React.PropTypes.string,
|
||||
id: React.PropTypes.string,
|
||||
name: React.PropTypes.string.isRequired,
|
||||
style: React.PropTypes.object
|
||||
};
|
||||
|
||||
module.exports = Tabs;
|
31
ui/src/components/tabs/readme.md
Normal file
31
ui/src/components/tabs/readme.md
Normal file
@ -0,0 +1,31 @@
|
||||
# `<Tabs>`
|
||||
|
||||
## demo
|
||||
|
||||
```embed
|
||||
const React = require('react');
|
||||
const ReactDOM = require('react-dom/server');
|
||||
const Base = require('../base');
|
||||
const Row = require('../row');
|
||||
const Column = require('../column');
|
||||
const Tabs = require('./index');
|
||||
const Tab = require('../tab');
|
||||
const styles = require('./style.css');
|
||||
|
||||
nmodule.exports = ReactDOM.renderToString(
|
||||
<Base>
|
||||
<Row>
|
||||
<Column xs={12}>
|
||||
<Tabs name='my-tab-group'>
|
||||
<Tab title='Containers'>
|
||||
<h1>Containers</h1>
|
||||
</Tab>
|
||||
<Tab title='Users'>
|
||||
<h1>User</h1>
|
||||
</Tab>
|
||||
</Tabs>
|
||||
</Column>
|
||||
</Row>
|
||||
</Base>
|
||||
);
|
||||
```
|
6
ui/src/components/tabs/style.css
Normal file
6
ui/src/components/tabs/style.css
Normal file
@ -0,0 +1,6 @@
|
||||
.tabs {
|
||||
position: relative;
|
||||
min-height: 200px; /* This part sucks */
|
||||
clear: both;
|
||||
margin: 25px 0;
|
||||
}
|
@ -11,7 +11,9 @@ module.exports = {
|
||||
Column: require('./components/column/readme.md'),
|
||||
Button: require('./components/button/readme.md'),
|
||||
Toggle: require('./components/toggle/readme.md'),
|
||||
Checkbox: require('./components/checkbox/readme.md')
|
||||
Checkbox: require('./components/checkbox/readme.md'),
|
||||
Tab: require('./components/tab/readme.md'),
|
||||
Tabs: require('./components/tabs/readme.md')
|
||||
},
|
||||
FAQ: require('./faq.md')
|
||||
};
|
||||
|
@ -5,5 +5,7 @@ module.exports = {
|
||||
Column: require('./components/column'),
|
||||
Container: require('./components/container'),
|
||||
Row: require('./components/row'),
|
||||
Toggle: require('./components/toggle')
|
||||
Toggle: require('./components/toggle'),
|
||||
Tab: require('./components/tab'),
|
||||
Tabs: require('./components/tabs')
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user