Skip to content

Commit 68c4199

Browse files
donniebergdonnieberg
committed
Fix merge errors from master
2 parents 62084f1 + f33e84d commit 68c4199

File tree

12 files changed

+269
-148
lines changed

12 files changed

+269
-148
lines changed

‎components/SLDSModal/index.jsx

Lines changed: 21 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import React from 'react';
1313
import SLDSButton from '../SLDSButton';
1414
import {Icon} from '../SLDSIcons';
1515
import {EventUtil} from '../utils';
16+
import SLDSSettings from '../SLDSSettings';
1617

1718

1819
import Modal from 'react-modal';
@@ -57,6 +58,7 @@ module.exports = React.createClass( {
5758
},
5859

5960
componentDidMount () {
61+
Modal.setAppElement(SLDSSettings.getAppElement());
6062
//console.log('!!! window.activeElement !!! ',document.activeElement);
6163
this.setState({returnFocusTo:document.activeElement})
6264
if(!this.state.revealed){
@@ -83,7 +85,7 @@ module.exports = React.createClass( {
8385

8486
updateBodyScroll () {
8587
if(window && document && document.body){
86-
if(!this.state.isClosing){
88+
if(this.props.isOpen){
8789
document.body.style.overflow = 'hidden';
8890
}
8991
else{
@@ -92,13 +94,23 @@ module.exports = React.createClass( {
9294
}
9395
},
9496

97+
handleModalClick(event) {
98+
if(event && event.stopPropagation){
99+
event.stopPropagation();
100+
}
101+
},
102+
95103
getModal() {
96-
return <div className={'slds-modal' +(this.state.revealed?' slds-fade-in-open':'')}
97-
onClick={this.closeModal}>
104+
return <div
105+
className={'slds-modal' +(this.state.revealed?' slds-fade-in-open':'')}
106+
style={{pointerEvents:'inherit'}}
107+
onClick={this.closeModal}
108+
>
98109
<div
99110
role='dialog'
100111
className='slds-modal__container'
101-
onClick={(e)=>{EventUtil.trap(e);}}>
112+
onClick={this.handleModalClick}
113+
>
102114
<div className='slds-modal__header'>
103115
<h2 className='slds-text-heading--medium'>{this.props.title}</h2>
104116
<SLDSButton className='slds-button slds-modal__close' onClick={this.closeModal}>
@@ -135,9 +147,13 @@ module.exports = React.createClass( {
135147

136148
componentDidUpdate (prevProps, prevState) {
137149

138-
if(this.state.isClosing !== prevState.isClosing){
139150

151+
if(this.props.isOpen !== prevProps.isOpen){
140152
this.updateBodyScroll();
153+
}
154+
155+
if(this.state.isClosing !== prevState.isClosing){
156+
141157

142158

143159
if(this.state.isClosing){

‎components/SLDSSettings.js

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
1212
'use strict';
1313

1414
let assetsPath = 'assets/';
15-
15+
let appRoot;
1616
module.exports = {
1717
setAssetsPath: (path)=>{
1818
if(path){
@@ -21,5 +21,13 @@ module.exports = {
2121
},
2222
getAssetsPath: ()=>{
2323
return String(assetsPath);
24+
},
25+
setAppElement: (el)=>{
26+
if(el){
27+
appRoot = el;
28+
}
29+
},
30+
getAppElement: ()=>{
31+
return appRoot;
2432
}
2533
};

‎components/utils/CSSUtil.js

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
/*
2+
Copyright (c) 2015, salesforce.com, inc. All rights reserved.
3+
4+
Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
5+
Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
6+
Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
7+
Neither the name of salesforce.com, inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
8+
9+
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
10+
*/
11+
12+
'use strict';
13+
14+
const addCSSRule = (sheet, selector, rules, index) => {
15+
console.log('selector: ',selector);
16+
console.log('rules: ',rules);
17+
if('insertRule' in sheet) {
18+
console.log('insertRule: ');
19+
sheet.insertRule(selector + '{ ' + rules + ' }', index);
20+
}
21+
else if('addRule' in sheet) {
22+
console.log('addRule: ');
23+
sheet.addRule(selector, rules.join(';'), index);
24+
}
25+
};
26+
27+
module.exports = {
28+
load: (cssClasses)=>{
29+
const sheet = (function() {
30+
const style = document.createElement("style");
31+
style.appendChild(document.createTextNode(""));
32+
document.head.appendChild(style);
33+
return style.sheet;
34+
})();
35+
cssClasses.forEach((cssClass)=>{
36+
const selector = cssClass.selector;
37+
const rules = cssClass.rules;
38+
addCSSRule(sheet,selector,rules.join(';'), 0);
39+
40+
// rules.forEach((rule)=>{
41+
// addCSSRule(sheet,selector,rule, 0);
42+
// });
43+
});
44+
}
45+
};
46+

‎components/utils/index.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,13 @@ THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
1313

1414
import DateUtil from './DateUtil';
1515
import EventUtil from './EventUtil';
16+
import CSSUtil from './CSSUtil';
17+
1618
import KEYS from './KEYS';
1719

1820
module.exports = {
1921
DateUtil:DateUtil,
2022
EventUtil:EventUtil,
23+
CSSUtil:CSSUtil,
2124
KEYS:KEYS
2225
};

‎demo/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ const { Route, DefaultRoute, RouteHandler, Link } = Router;
66

77
import { SLDSSettings } from '../components/';
88
SLDSSettings.setAssetsPath('demo/assets/');
9-
9+
SLDSSettings.setAppElement('#root');
1010
//console.log('SLDSSettings.getAssetsPath: '+SLDSSettings.getAssetsPath());
1111

1212
import App from './App';

‎demo/pages/HomePage/ModalSection.jsx

Lines changed: 7 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -42,17 +42,7 @@ module.exports = React.createClass( {
4242

4343
getModalContent () {
4444
return <div>
45-
<p>Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis. Cillum sunt ad dolore
46-
quis aute consequat ipsum magna exercitation reprehenderit magna. Tempor cupidatat consequat elit dolor adipisicing.</p>
47-
<p>Dolor eiusmod sunt ex incididunt cillum quis nostrud velit duis sit officia. Lorem aliqua enim laboris do dolor eiusmod officia. Mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident. Eiusmod et adipisicing culpa deserunt
48-
nostrud ad veniam nulla aute est. Labore esse esse cupidatat amet velit id elit consequat minim ullamco mollit enim excepteur ea.</p>
4945

50-
<p>Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis. Cillum sunt ad dolore
51-
quis aute consequat ipsum magna exercitation reprehenderit magna. Tempor cupidatat consequat elit dolor adipisicing.</p>
52-
<p>Dolor eiusmod sunt ex incididunt cillum quis nostrud velit duis sit officia. Lorem aliqua enim laboris do dolor eiusmod officia. Mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident. Eiusmod et adipisicing culpa deserunt
53-
nostrud ad veniam nulla aute est. Labore esse esse cupidatat amet velit id elit consequat minim ullamco mollit enim excepteur ea.</p>
54-
55-
{/*
5646
<SLDSPicklistBase
5747
options={[
5848
{label:'A Option Option Super Super Long',value:'A0'},
@@ -69,25 +59,16 @@ module.exports = React.createClass( {
6959
]}
7060
value='C0'
7161
label="Contacts"
72-
modal={true}
62+
modal={false}
7363
placeholder = "Select a contact"
7464
onSelect={(value)=>{console.log('selected: ',value);}} />
65+
<p>With the Lightning Design System you can build custom applications with a look and feel that is consistent with Salesforce core features — without reverse engineering our styles! Simply download our platform-agnostic CSS framework and get started today.</p>
66+
<a href='http://www.google.com'>CLICK!</a>
67+
<p>
68+
Utilize our detailed guidelines to confidently design excellent apps that fit right into the Salesforce ecosystem. With the Design System, you get access to all of the Salesforce core visual and interaction design patterns so that you can follow established best practices and build apps that have a consistent look and feel with the Salesforce user experience.
69+
</p>
7570

76-
*/}
77-
<p>Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis. Cillum sunt ad dolore
78-
quis aute consequat ipsum magna exercitation reprehenderit magna. Tempor cupidatat consequat elit dolor adipisicing.</p>
79-
<p>Dolor eiusmod sunt ex incididunt cillum quis nostrud velit duis sit officia. Lorem aliqua enim laboris do dolor eiusmod officia. Mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident. Eiusmod et adipisicing culpa deserunt
80-
nostrud ad veniam nulla aute est. Labore esse esse cupidatat amet velit id elit consequat minim ullamco mollit enim excepteur ea.</p>
81-
82-
<p>Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis. Cillum sunt ad dolore
83-
quis aute consequat ipsum magna exercitation reprehenderit magna. Tempor cupidatat consequat elit dolor adipisicing.</p>
84-
<p>Dolor eiusmod sunt ex incididunt cillum quis nostrud velit duis sit officia. Lorem aliqua enim laboris do dolor eiusmod officia. Mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident. Eiusmod et adipisicing culpa deserunt
85-
nostrud ad veniam nulla aute est. Labore esse esse cupidatat amet velit id elit consequat minim ullamco mollit enim excepteur ea.</p>
8671

87-
<p>Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis. Cillum sunt ad dolore
88-
quis aute consequat ipsum magna exercitation reprehenderit magna. Tempor cupidatat consequat elit dolor adipisicing.</p>
89-
<p>Dolor eiusmod sunt ex incididunt cillum quis nostrud velit duis sit officia. Lorem aliqua enim laboris do dolor eiusmod officia. Mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident. Eiusmod et adipisicing culpa deserunt
90-
nostrud ad veniam nulla aute est. Labore esse esse cupidatat amet velit id elit consequat minim ullamco mollit enim excepteur ea.</p>
9172

9273
</div>;
9374
},
@@ -113,7 +94,7 @@ module.exports = React.createClass( {
11394
</SLDSButton>
11495
<SLDSModal
11596
isOpen={this.state.modalIsOpen}
116-
title={<span>Super Stuff</span>}
97+
title={<span>Lightning Design System: Style with Ease</span>}
11798
footer={[
11899
<button className='slds-button slds-button--neutral' onClick={this.closeModal}>Cancel</button>,
119100
<button className='slds-button slds-button--neutral slds-button--brand' onClick={this.handleSubmitModal}>Save</button>

‎demo/pages/HomePage/index.jsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -59,16 +59,15 @@ module.exports = React.createClass( {
5959
<main className='stage-main slds-grid slds-wrap slds-grow' role='main'>
6060
<div className='region region--main slds-grow slds-size--1-of-1 slds-medium-size--1-of-2 slds-large-size--8-of-12 slds-col-rule--right slds-p-around--large'>
6161

62-
<LookupBaseSection />
63-
6462
<ButtonSection />
6563

6664
<PicklistBaseSection />
6765

6866
<ModalSection />
6967

70-
<DatePickerSingleSelectSection />
68+
<LookupBaseSection />
7169

70+
<DatePickerSingleSelectSection />
7271

7372

7473
{/*

0 commit comments

Comments
 (0)