Last active
September 15, 2016 08:46
-
-
Save cosminnicula/627a18822411292c1fd2 to your computer and use it in GitHub Desktop.
Salesforce Lightning Design System: custom PickList
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | |
<title>SLDS + React with Webpack</title> | |
<link type="text/css" href="../../assets/styles/salesforce-lightning-design-system.css" rel="stylesheet" /> | |
<link type="text/css" href="my-style.css" rel="stylesheet" /> | |
</head> | |
<body> | |
<div id="main-placeholder"/> | |
<script src="/__build__/shared.js"></script> | |
<script src="/__build__/webpack_slds-with-react.js"></script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
'use strict'; | |
import React from 'react'; | |
import ReactDOM from 'react-dom'; | |
import MyDropdownList from 'MyDropdownList' | |
ReactDOM.render( | |
<MyDropdownList /> | |
, document.getElementById('main-placeholder') | |
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#main-placeholder { | |
margin-top: 10px; | |
margin-left: 10px; | |
} | |
.slds-button:focus { | |
border: 1px solid #ffcc99; | |
outline: 0; | |
-webkit-box-shadow: 0 0 6px 0 #ffcc99; | |
-moz-box-shadow: 0 0 6px 0 #ffcc99; | |
-o-box-shadow: 0 0 6px 0 #ffcc99; | |
box-shadow: 0 0 6px 0 #ffcc99; | |
} | |
.slds-dropdown__item > a { | |
padding-left: 0px; | |
} | |
.slds-dropdown__item .slds-icon { | |
height: 0px; | |
width: 0px; | |
} | |
.slds-dropdown__item.slds-is-selected { | |
background-color: #ffcc99; | |
font-weight: 400; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
'use strict'; | |
import React from 'react'; | |
import Menu from 'ui/components/menus/index.react'; | |
import componentUtil from 'app_modules/ui/util/component'; | |
import MyPickList from 'MyPickList'; | |
import RootCloseWrapper from 'react-overlays/lib/RootCloseWrapper'; | |
const pf = componentUtil.prefix; | |
const PT = React.PropTypes; | |
class MyDropdownList extends React.Component { | |
constructor(props) { | |
super(props); | |
this.state = { | |
isOpened: false | |
} | |
} | |
onToggle () { | |
this.setState({isOpened: !this.state.isOpened}); | |
} | |
onClose () { | |
this.refs.refPickList.toggleHidden(); | |
} | |
render() { | |
let list = ( | |
<Menu.List ref="refMenuList"> | |
<Menu.Item href="#">Option A</Menu.Item> | |
<Menu.Item href="#">Option B</Menu.Item> | |
<Menu.Item href="#">Option C</Menu.Item> | |
<Menu.Item href="#">Option D</Menu.Item> | |
<Menu.Item href="#">Option E</Menu.Item> | |
<Menu.Item href="#">Option F</Menu.Item> | |
<Menu.Item href="#">Option G</Menu.Item> | |
<Menu.Item href="#">Option H</Menu.Item> | |
<Menu.Item href="#">Option I</Menu.Item> | |
<Menu.Item href="#">Option J</Menu.Item> | |
<Menu.Item href="#">Option K</Menu.Item> | |
<Menu.Item href="#">Option L</Menu.Item> | |
</Menu.List> | |
); | |
if(this.state.isOpened) { | |
list = ( | |
<RootCloseWrapper noWrap onRootClose={this.onClose.bind(this)}> | |
{list} | |
</RootCloseWrapper> | |
); | |
} | |
return ( | |
<div className='demo-only demo-only--dropdown' style={{height: '240px'}}> | |
<MyPickList ref="refPickList" label="Select an Option" aria-expanded={false} onToggle={this.onToggle.bind(this)}> | |
<Menu ref="refMenu" className={pf('dropdown--left')}> | |
{list} | |
</Menu> | |
</MyPickList> | |
</div> | |
); | |
} | |
} | |
module.exports = App; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
'use strict'; | |
import React from 'react'; | |
import ReactDOM from 'react-dom'; | |
import PickList from 'ui/components/picklists/index.react'; | |
const PT = React.PropTypes; | |
class MyPickList extends PickList { | |
constructor(props) { | |
super(props); | |
} | |
itemSelected (item) { | |
super.toggleHidden(); | |
super.itemSelected(item); | |
ReactDOM.findDOMNode(this).firstChild.focus(); | |
this.props.onToggle(); | |
} | |
toggleHidden () { | |
super.toggleHidden(); | |
this.props.onToggle(); | |
} | |
} | |
module.exports = MyPickList; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var fs = require('fs'); | |
var path = require('path'); | |
var webpack = require('webpack'); | |
var ExtractTextPlugin = require("extract-text-webpack-plugin"); | |
function isDirectory(dir) { | |
return fs.lstatSync(dir).isDirectory(); | |
} | |
var config = { | |
devtool: 'inline-source-map', | |
context: __dirname, | |
entry: fs.readdirSync(path.join(__dirname, 'my-docs')).reduce(function(entries, dir) { | |
if (isDirectory(path.join(__dirname, 'my-docs', dir))) | |
entries[dir] = path.join(__dirname, 'my-docs', dir, 'main.js'); | |
return entries; | |
}, {}), | |
output: { | |
path: 'my-docs/__build__', filename: '[name].js', chunkFilename: '[id].chunk.js', publicPath: '/__build__/' | |
}, | |
module: { | |
loaders: [{test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel'}, | |
{test: /\.css$/, exclude: /node_modules/, loader: ExtractTextPlugin.extract("style-loader", "css-loader")}, | |
{test: /\.less$/, exclude: /node_modules/, loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")}, | |
{test: /\.(png|gif|svg)$/, exclude: /node_modules/, loader: 'url-loader?limit=100000'}] | |
}, | |
resolve: { | |
extensions: ['', '.js', '.jsx'], | |
alias: { | |
'app_modules': process.cwd() + '/app_modules', | |
'ui': process.cwd() + '/ui', | |
'.generated': process.cwd() + '/.generated' | |
} | |
}, | |
plugins: [new webpack.optimize.CommonsChunkPlugin('shared.js'), new webpack.DefinePlugin({ | |
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development') | |
})] | |
}; | |
module.exports = config; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment