wood/clash-and-dashboard
1
0
Fork 0
mirror of https://github.com/woodchen-ink/clash-and-dashboard.git synced 2025-07-18 14:01:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(container): remove sortlist

Browse Source
This commit is contained in:
henson 2018-10-21 13:02:00 +08:00
parent ca0e41e824
commit f4653a40ec
8 changed files with 2611 additions and 2547 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
configs/webpack/common.js
View File

@ -63,10 +63,10 @@ module.exports = {
],
}),
],
externals: {
react: 'React',
'react-dom': 'ReactDOM',
},
// externals: {
// react: 'React',
// 'react-dom': 'ReactDOM',
// },
performance: {
hints: false,
},

5048
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

38
src/components/Select/index.tsx
View File

@ -19,7 +19,8 @@ interface SelectProps extends BaseComponentProps {
interface SelectState {
dropdownListStyles: React.CSSProperties
showDropDownList: boolean
showDropDownList: boolean,
hasCreateDropList: boolean
}
export class Select extends React.Component<SelectProps, SelectState> {
@ -35,21 +36,25 @@ export class Select extends React.Component<SelectProps, SelectState> {
state = {
dropdownListStyles: {},
showDropDownList: false
showDropDownList: false,
hasCreateDropList: false
}
constructor (props) {
super(props)
}
componentDidUpdate() {
console.log('update')
}
componentDidMount () {
// create container element
const container = document.createElement('div')
document.body.appendChild(container)
this.$container = container
document.addEventListener('click', this.handleGlobalClick, true)
}
componentDidMount () {
this.setState({ dropdownListStyles: this.calculateAttachmentPosition() })
}
@ -57,6 +62,23 @@ export class Select extends React.Component<SelectProps, SelectState> {
document.body.removeChild(this.$container)
document.removeEventListener('click', this.handleGlobalClick, true)
}
shouldComponentUpdate(nextProps, nextState) {
if (nextProps.value === this.props.value && nextState.showDropDownList === this.state.showDropDownList) {
return false
}
return true
}
handleShowDropList = () => {
if (!this.state.hasCreateDropList) {
this.setState({
hasCreateDropList: true,
})
}
this.setState({
showDropDownList: true
})
}
private handleGlobalClick = (e) => {
const el = this.$attachment.current
@ -118,7 +140,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
render () {
const { value, onSelect, children, className: cn, style } = this.props
const { dropdownListStyles, showDropDownList } = this.state
const { dropdownListStyles, showDropDownList, hasCreateDropList } = this.state
const matchChild = this.getSelectedOption(value, children)
const dropDownList = (
<div
@ -137,12 +159,12 @@ export class Select extends React.Component<SelectProps, SelectState> {
className={classnames('select', cn)}
style={style}
ref={this.$target}
onClick={() => this.setState({ showDropDownList: !showDropDownList })}
onClick={this.handleShowDropList}
>
{matchChild.props.children}
<Icon type="triangle-down" />
</div>
{createPortal(dropDownList, this.$container)}
{hasCreateDropList && createPortal(dropDownList, this.$container)}
</>
}
}

2
src/components/Select/style.scss
View File

@ -16,7 +16,7 @@
}
.select-list {
position: fixed;
position: absolute;
max-width: 170px;
border-radius: 4px;
overflow: hidden;

2
src/containers/App.tsx
View File

@ -33,7 +33,7 @@ export default class App extends React.Component<AppProps, {}> {
<div className="page-container">
{
routes.map(
route => <Route exact={!!route.exact} path={route.path} component={route.component}/>
route => <Route exact={!!route.exact} path={route.path} key={route.path} component={route.component}/>
)
}
</div>

54
src/containers/Rules/index.tsx
View File

@ -25,7 +25,48 @@ class Rules extends React.Component<I18nProps, RulesState> {
{ type: RuleType['DOMAIN-SUFFIX'], payload: 'google.com.hk', proxy: 'HK' },
{ type: RuleType['DOMAIN-SUFFIX'], payload: 'twitter.com', proxy: 'HKG' },
{ type: RuleType['DOMAIN'], payload: 'pornhub.com', proxy: 'HKG' },
{ type: RuleType['FINAL'], payload: '', proxy: 'DIRECT' }
{ type: RuleType['DOMAIN-SUFFIX'], payload: 'twitter.com', proxy: 'HKG' },
{ type: RuleType['DOMAIN'], payload: 'pornhub.com', proxy: 'HKG' },
{ type: RuleType['DOMAIN-SUFFIX'], payload: 'twitter.com', proxy: 'HKG' },
{ type: RuleType['DOMAIN'], payload: 'pornhub.com', proxy: 'HKG' },
{ type: RuleType['DOMAIN-SUFFIX'], payload: 'twitter.com', proxy: 'HKG' },
{ type: RuleType['DOMAIN'], payload: 'pornhub.com', proxy: 'HKG' },
{ type: RuleType['DOMAIN-SUFFIX'], payload: 'twitter.com', proxy: 'HKG' },
{ type: RuleType['DOMAIN'], payload: 'pornhub.com', proxy: 'HKG' },
{ type: RuleType['DOMAIN-SUFFIX'], payload: 'twitter.com', proxy: 'HKG' },
{ type: RuleType['DOMAIN'], payload: 'pornhub.com', proxy: 'HKG' },
{ type: RuleType['DOMAIN-SUFFIX'], payload: 'twitter.com', proxy: 'HKG' },
{ type: RuleType['DOMAIN'], payload: 'pornhub.com', proxy: 'HKG' },
{ type: RuleType['DOMAIN-SUFFIX'], payload: 'twitter.com', proxy: 'HKG' },
{ type: RuleType['DOMAIN'], payload: 'pornhub.com', proxy: 'HKG' },
{ type: RuleType['DOMAIN'], payload: 'pornhub.com', proxy: 'HKG' },
{ type: RuleType['DOMAIN-SUFFIX'], payload: 'twitter.com', proxy: 'HKG' },
{ type: RuleType['DOMAIN'], payload: 'pornhub.com', proxy: 'HKG' },
{ type: RuleType['DOMAIN-SUFFIX'], payload: 'twitter.com', proxy: 'HKG' },
{ type: RuleType['DOMAIN'], payload: 'pornhub.com', proxy: 'HKG' },
{ type: RuleType['DOMAIN-SUFFIX'], payload: 'twitter.com', proxy: 'HKG' },
{ type: RuleType['DOMAIN'], payload: 'pornhub.com', proxy: 'HKG' },
{ type: RuleType['DOMAIN'], payload: 'pornhub.com', proxy: 'HKG' },
{ type: RuleType['DOMAIN-SUFFIX'], payload: 'twitter.com', proxy: 'HKG' },
{ type: RuleType['DOMAIN'], payload: 'pornhub.com', proxy: 'HKG' },
{ type: RuleType['DOMAIN-SUFFIX'], payload: 'twitter.com', proxy: 'HKG' },
{ type: RuleType['DOMAIN'], payload: 'pornhub.com', proxy: 'HKG' },
{ type: RuleType['DOMAIN-SUFFIX'], payload: 'twitter.com', proxy: 'HKG' },
{ type: RuleType['DOMAIN'], payload: 'pornhub.com', proxy: 'HKG' },
{ type: RuleType['DOMAIN'], payload: 'pornhub.com', proxy: 'HKG' },
{ type: RuleType['DOMAIN-SUFFIX'], payload: 'twitter.com', proxy: 'HKG' },
{ type: RuleType['DOMAIN'], payload: 'pornhub.com', proxy: 'HKG' },
{ type: RuleType['DOMAIN-SUFFIX'], payload: 'twitter.com', proxy: 'HKG' },
{ type: RuleType['DOMAIN'], payload: 'pornhub.com', proxy: 'HKG' },
{ type: RuleType['DOMAIN-SUFFIX'], payload: 'twitter.com', proxy: 'HKG' },
{ type: RuleType['DOMAIN'], payload: 'pornhub.com', proxy: 'HKG' },
{ type: RuleType['DOMAIN'], payload: 'pornhub.com', proxy: 'HKG' },
{ type: RuleType['DOMAIN-SUFFIX'], payload: 'twitter.com', proxy: 'HKG' },
{ type: RuleType['DOMAIN'], payload: 'pornhub.com', proxy: 'HKG' },
{ type: RuleType['DOMAIN-SUFFIX'], payload: 'twitter.com', proxy: 'HKG' },
{ type: RuleType['DOMAIN'], payload: 'pornhub.com', proxy: 'HKG' },
{ type: RuleType['DOMAIN-SUFFIX'], payload: 'twitter.com', proxy: 'HKG' },
{ type: RuleType['DOMAIN'], payload: 'pornhub.com', proxy: 'HKG' },
],
proxies: {
DIRECT: { type: 'Direct' },
@ -115,7 +156,6 @@ class Rules extends React.Component<I18nProps, RulesState> {
const { modifiedIndex, proxies } = this.state
const isFinal = rule.type === 'FINAL'
const DragHandle = SortableHandle(() => <Icon type="drag" size={16} />)
return (
<li className="rule-item" key={index}>
<Row className="rule-item-row" gutter={24} align="middle">
@ -127,7 +167,7 @@ class Rules extends React.Component<I18nProps, RulesState> {
isFinal
? rule.type
: (
<Select value={rule.type} onSelect={type => this.handleModifyType(index, type)}>
<Select key={index} value={rule.type} onSelect={type => this.handleModifyType(index, type)}>
{
Object.keys(RuleType)
.filter(type => type !== 'FINAL')
@ -162,7 +202,7 @@ class Rules extends React.Component<I18nProps, RulesState> {
}
</Col>
<Col className="rule-proxy" span={5}>
<Select className="rule-proxy-option" value={rule.proxy} onSelect={proxy => this.handleModifyProxy(index, proxy)}>
<Select className="rule-proxy-option" key={index} value={rule.proxy} onSelect={proxy => this.handleModifyProxy(index, proxy)}>
{
Object.keys(proxies).map(proxyName => {
const proxy = proxies[proxyName]
@ -188,7 +228,6 @@ class Rules extends React.Component<I18nProps, RulesState> {
const { t } = this.props
const { rules } = this.state
const SortableList = SortableContainer<{ rules: Rule[] }>(this.renderRules)
return (
<div className="page">
<Header title={t('title')} >
@ -197,7 +236,10 @@ class Rules extends React.Component<I18nProps, RulesState> {
<Card className="rules-card">
<div className="rules">
<SortableList rules={rules} onSortEnd={this.onSortEnd} useDragHandle={true} />
{
rules.map((rule: Rule, index )=> this.renderRuleItem(rule, index))
}
{/* <SortableList rules={rules} onSortEnd={this.onSortEnd} useDragHandle={true} /> */}
</div>
</Card>
</div>

2
src/containers/Sidebar/index.tsx
View File

@ -24,7 +24,7 @@ class Sidebar extends React.Component<SidebarProps, {}> {
{
routes.map(
({ path, name, exact }) => (
<li className="item">
<li className="item" key={name}>
<NavLink to={path} activeClassName="active" exact={!!exact}>{ t(name) }</NavLink>
</li>
)

4
src/index.html.ejs
View File

@ -9,7 +9,7 @@
<div id="root"></div>
<!-- Dependencies -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.2/umd/react.production.min.js" integrity="sha256-2EQx5J1ux3sjgPLtDevlo449XNXfvEplcRYWIF6ui8w=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.2/umd/react-dom.production.min.js" integrity="sha256-3NNU/yoE0R7VxxapKiw/hkgQzcSMztyclb5RpeVlV7Y=" crossorigin="anonymous"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.2/umd/react.production.min.js" integrity="sha256-2EQx5J1ux3sjgPLtDevlo449XNXfvEplcRYWIF6ui8w=" crossorigin="anonymous"></script> -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.2/umd/react-dom.production.min.js" integrity="sha256-3NNU/yoE0R7VxxapKiw/hkgQzcSMztyclb5RpeVlV7Y=" crossorigin="anonymous"></script> -->
</body>
</html>